Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › What do you call this effect?
New Posts  All Forums:Forum Nav:

What do you call this effect?

post #1 of 5
Thread Starter 
What do you call this effect, when you click on the navigation links and it slides the page over to the next one, and can I reproduce it with HTML/CSS coding, eliminating jscript?

http://www.wix.com/website-template/view/html/654
Dynamix
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7-860 Gigabyte GA-P55A-UD4P Radeon 7970 Corsair Domintor Twins + Other = 16 Gb 
Hard DriveHard DriveOptical DriveCooling
WD Caviar Black, 500gb OCZ Solid 3 Sony Optiarc Corsair H50 
OSMonitorKeyboardPower
Windows 7 Ultimate Samsung P2570HD + Other Logitech G110 Corsair 750W HX 
CaseMouse
Antec p183 Logitech MX Revolution 
  hide details  
Reply
Dynamix
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7-860 Gigabyte GA-P55A-UD4P Radeon 7970 Corsair Domintor Twins + Other = 16 Gb 
Hard DriveHard DriveOptical DriveCooling
WD Caviar Black, 500gb OCZ Solid 3 Sony Optiarc Corsair H50 
OSMonitorKeyboardPower
Windows 7 Ultimate Samsung P2570HD + Other Logitech G110 Corsair 750W HX 
CaseMouse
Antec p183 Logitech MX Revolution 
  hide details  
Reply
post #2 of 5
I would call it "animated page slide".

I would just do it as an single animated page using JavaScript. It might be possible to pull of with just HTML5 but IMO that's an bad idea considering backwards compatibility with older browsers.

If you really want to do it with just HTML5 then look into "HTML5 Canvas Animation"

http://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/
http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/
    
CPUMotherboardGraphicsRAM
i7 920 OC 4.0 GHz 1.35v HT on Asus P6T 1366 SLI Gigabyte GTX 970 OCZ 12GB DDR3 GOLD/Platinum mix 
Hard DriveHard DriveHard DriveHard Drive
Samsung Spinpoint F1 1TB Western digital 300GB Western digital Caviar Blue 1TB Samsung 840 EVO 250Gb 
Optical DriveCoolingOSMonitor
generic LG DVD WC'd , Supreme LT, NexXxoS Xtreme III 360, Phob... Windows 7 x64 Samsung 27" LED S27A550B 
MonitorMonitorKeyboardPower
ACER 23" x233H Dell U3415W Logitech G11 Chieftec 850W 
CaseMouseMouse PadAudio
Phanteks enthoo luxe Razer deathAdder respawn steelseries Qck Yamaha HTR-6130 AV Receiver 
AudioAudio
Yamaha NS-50B floor tower speakers miditech Audiolink II stereo sound card 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i7 920 OC 4.0 GHz 1.35v HT on Asus P6T 1366 SLI Gigabyte GTX 970 OCZ 12GB DDR3 GOLD/Platinum mix 
Hard DriveHard DriveHard DriveHard Drive
Samsung Spinpoint F1 1TB Western digital 300GB Western digital Caviar Blue 1TB Samsung 840 EVO 250Gb 
Optical DriveCoolingOSMonitor
generic LG DVD WC'd , Supreme LT, NexXxoS Xtreme III 360, Phob... Windows 7 x64 Samsung 27" LED S27A550B 
MonitorMonitorKeyboardPower
ACER 23" x233H Dell U3415W Logitech G11 Chieftec 850W 
CaseMouseMouse PadAudio
Phanteks enthoo luxe Razer deathAdder respawn steelseries Qck Yamaha HTR-6130 AV Receiver 
AudioAudio
Yamaha NS-50B floor tower speakers miditech Audiolink II stereo sound card 
  hide details  
Reply
post #3 of 5
Thread Starter 
I'm trying to replicate that web template with only HTML5/CSS in order to make a lightweight fast loading web page for my personal bio.
Dynamix
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7-860 Gigabyte GA-P55A-UD4P Radeon 7970 Corsair Domintor Twins + Other = 16 Gb 
Hard DriveHard DriveOptical DriveCooling
WD Caviar Black, 500gb OCZ Solid 3 Sony Optiarc Corsair H50 
OSMonitorKeyboardPower
Windows 7 Ultimate Samsung P2570HD + Other Logitech G110 Corsair 750W HX 
CaseMouse
Antec p183 Logitech MX Revolution 
  hide details  
Reply
Dynamix
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7-860 Gigabyte GA-P55A-UD4P Radeon 7970 Corsair Domintor Twins + Other = 16 Gb 
Hard DriveHard DriveOptical DriveCooling
WD Caviar Black, 500gb OCZ Solid 3 Sony Optiarc Corsair H50 
OSMonitorKeyboardPower
Windows 7 Ultimate Samsung P2570HD + Other Logitech G110 Corsair 750W HX 
CaseMouse
Antec p183 Logitech MX Revolution 
  hide details  
Reply
post #4 of 5
You could probably get something relatively easily using CSS3 transitions. I haven't done anything like that with them, but it should be doable.

Be aware, It would not work in IE versions before 10 though and you would need to add additional vendor specific prefixed equivalents for older versions of chrome etc.
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #5 of 5
I read something on this a while ago.
http://www.mdawson.net/csstips/purecsstabs.php

You should be able to start with his and add transitions to get the same effect as that wix site. I had my own (more elegant) solution that I did as a thought exercise a while back, but I no longer have it and don't care to try again as the whole idea is not really great to begin with. I've also messed with CSS effects and tabs using the ":target" selector.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › What do you call this effect?