11 个创新的网站滑动效果设计案例展示
fmms 13年前
<p>图片的滑动展示在网站设计中使用非常普遍,可用于解决方案、产品和服务的各种展示,而借助 JavaScript 和 CSS3 可让这些效果实现起来更加简单。</p> <p>本文介绍 11 个网站滑动效果设计非常帮的案例供你参考:</p> <p><strong><a href="/misc/goto?guid=4958335508090287116">Superlover</a></strong></p> <p><img title="Superlover" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/26c6f71b66fd134e8207b54d4c6fea8c.jpg" width="500" height="250" /></p> <p>Cool combination of scroll and left with easing animation.</p> <p><strong><a href="/misc/goto?guid=4958335508903834311">Green Campus Guide</a></strong></p> <p><img title="Green Campus Guide" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/df08efefc2f37679b2ac9ca33cfba381.jpg" width="500" height="250" /></p> <p>Slider with integrated tooltips and modal dialogs.</p> <p><strong><a href="/misc/goto?guid=4958335509694919158">Lake Nona</a></strong></p> <p><img title="Lake Nona" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/648dacb36ef731986bad3e616f74c1d8.jpg" width="500" height="250" /></p> <p>Take a while to load but it's pretty impressive slider, a different kind of thumbnail view.</p> <p><strong><a href="/misc/goto?guid=4958335510491668643">Agence de comminication</a></strong></p> <p><img title="Agence de comminication" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/8094fcf6a9ff4af5e54f5e559a2c8cfb.jpg" width="500" height="250" /></p> <p>Unique slider with an animated call-to-action button.</p> <p><strong><a href="/misc/goto?guid=4958335511294461256">Kyan</a></strong></p> <p><img title="Kyan" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/528597e18a94aad547d1308d75f94329.jpg" width="500" height="250" /></p> <p>Another cool slider with a custom made animation.</p> <p><strong><a href="/misc/goto?guid=4958324917277609528">Create DM</a></strong></p> <p><img title="Create DM" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/794a8610e140dc4aafe551a05370142c.jpg" width="500" height="250" /></p> <p>A simple and yet elegant slider with CSS3 animation.</p> <p><strong><a href="/misc/goto?guid=4958335512828134186">2Fly</a></strong></p> <p><img title="2Fly" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/38a5cb42f3b5bcdabb057889a1bd29a3.jpg" width="500" height="250" /></p> <p>A backward compatible slider with CSS3 rotation. Pretty cool!</p> <p><strong><a href="/misc/goto?guid=4958335513618628261">Gen 3 Creative</a></strong></p> <p><img title="Gen 3 Creative" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/7313f62a0608448c2537590c52f601d8.jpg" width="500" height="250" /></p> <p>A content slider with different design on each slide.</p> <p><strong><a href="/misc/goto?guid=4958335514414100508">Carnation group</a></strong></p> <p><img title="Carnation group" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/b95994c3a0110cf4719f61946cead29c.jpg" width="500" height="250" /></p> <p>One of the famous technique - parallax slider.</p> <p><strong><a href="/misc/goto?guid=4958335515210125673">7 Days in Havana</a></strong></p> <p><img title="7 Days in Havana" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/e579071167f2b3e062376004255921ba.jpg" width="500" height="250" /></p> <p>Pretty cool concept, sort of like an accordion plus slider!</p> <p><strong><a href="/misc/goto?guid=4958335515996707135">AppGear</a></strong></p> <p><img title="AppGear" alt="11 个创新的网站滑动效果设计案例展示" src="https://simg.open-open.com/show/4fff308b8973058f424179eefe561685.jpg" width="500" height="250" /></p> <p>Honestly, I reckon this look like a carousel but it has a cool effect on it.</p> <p>via <a href="/misc/goto?guid=4958335516792722883" target="_blank">queness</a></p>