parallax

Multiple parallax video backgrounds

假如想象 提交于 2019-12-06 21:56:30
I found answers here on stackoverflow on how to create video div with parallax effect The recommended plugin was: https://github.com/linnett/backgroundVideo However I need multiple of parallax backgrounds on one site and I am having trouble with that, first one in order is allright, but the others are misspositioned, dont work absolutely as you would expect What is a solution for this? Calling the same plugin for every background separately? How do I do that? This doesnt quite work: <script> $(document).ready(function() { $("#my-video").backgroundVideo(); $("#my-video2").backgroundVideo(); });

分享14个超酷的视差滚动效果网站

强颜欢笑 提交于 2019-12-06 17:00:03
日期:2012-3-31 来源: GBin1.com Javascript视差滚动特效最早出现的时候使用多个不同的透明PNG背景图片叠放来实现,如果我们移动鼠标,将会以不同的速度移动不同层次上 的图片,产生层次感效果。现在随着javascript的技术发展,我们使用更加富有创意的方式来实现视差滚动效果,我们触发一系列不同的动画产生超酷的 视差滚动特效,为了给大家展示不同的实现方式,我们这里收集了14个超棒的视差滚动网站和演示,希望大家喜欢! OK-Studios Bepeve In Nike AirJordan 12 Krystalrae Adventure World Kryptis 来源: 分享14个超酷的视差滚动效果网站 来源: oschina 链接: https://my.oschina.net/u/156697/blog/52050

Parallax scrolling

陌路散爱 提交于 2019-12-06 16:25:58
问题 I'm trying to make a parallax effect according to this tutorial https://www.youtube.com/watch?v=D75WTf_Y738 But my function doesn't apply to my objects. Here's the function: function parallax() { var sphereOne = document.getElementById("sphereOne"); sphereOne.style.top = window.pageYOffset +'px'; }; window.addEventListener("scroll", parallax, false); I know I can use hundreds of JQ libraries instead to achieve the effect, but want to understand what's wrong. My objects just stuck at the same

bxslider not working in IE9

限于喜欢 提交于 2019-12-06 13:32:15
I have a bxslider plugin working on a site I am making for somebody and it works in all browsers except IE9 (possibly earlier versions of IE also but all I have to test it on is 9) I'm wondering where I'm going wrong in my code. I'll mention it's running alongside the scrolldeck parallax plugin Here is the related code from my header (calling the bxslider and scrolldeck parallax): <link href="style.css" rel="stylesheet" type="text/css" /> <link href="tipTip.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min

How to get Parallax Effect on UIButton in tvOS?

时光总嘲笑我的痴心妄想 提交于 2019-12-06 07:13:07
I'm trying to make some UIButtons in a UIView for a tvOS app but have been unable to get them to display the new parallax effect in the simulator. I successfully set up a TV image stack in images.xcassets called "startReadingButton" and my buttons load with the file, but they do not display the shiny parallax effect when swiping around on the remote in the simulator. Here is how I am loading my UIButtons: for button in 1...5 { let image = UIImage(named: "startReadingButton") let newButton = UIButton(type: .Custom) newButton.frame = buttonRects[button - 1] newButton.setBackgroundImage(image,

Pure css3 parallax and mobile

淺唱寂寞╮ 提交于 2019-12-06 04:44:54
问题 I'm using transform3D to achieve a pure css parallax effect. I have a really messy demo setup here: http://codepen.io/anon/pen/nGAvw This is the main code that does the translation: transform: translateZ(-1px) scale(2); z-index: -1; transform-style: preserve-3d; I would like my parallaxed image to be clipped using overflow:hidden. This works fine on desktop Chrome / Safari but stops working on Mobile Safari. From my further experiments it works fine on Android but stops working on iOS7. Any

【Parallax Animation】实现知乎 Android 客户端启动页视差滚动效果

纵然是瞬间 提交于 2019-12-05 02:42:33
欢迎转载,但请务必 注明出处 ! http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-screen-of-zhihu/ 前言 Parallax Scrolling(视差滚动) ,是一种常见的动画效果。视差一词来源于天文学,但在日常生活中也有它的身影。在疾驰的动车上看风景时,会发现越是离得近的,相对运动速度越快,而远处的山川河流只是缓慢的移动着,这就是最常见的视差效果。视差动画独有的层次感能带来极为逼真的视觉体验, iOS 、 Android Launcher 、 Website 都将视差动画作为提升用户视觉愉悦度的不二选择。 客户端应用第一次打开出现引导页也不是什么新鲜的事儿, ViewPager 配上几张设计师精心绘制的图片,分分钟即可了事。但是总有人把平凡的事情做到不平凡,如本文的知乎客户端,亦或是新浪微博贺岁版,百度贴吧某版等众多应用里都出现了视差动画的身影,随着用户手指的滑动,反馈以灵动、贴近真实的视觉以及操作体验,对应用的初始印象登时被提升到一个极高的点。 给我印象最深的是去年新浪微博的贺岁版,引导页是一系列的年画,里面有红色剪纸的小孩儿,滑动界面的时候感觉这些元素在『动』,是真正的灵动,能勾起人童年的回忆,年味儿十足

jquery menu bar floating top

℡╲_俬逩灬. 提交于 2019-12-05 02:19:11
问题 I'm trying to make a menu bar float constantly at the top of the browser, so when they scroll down the page the menu bar remains at the top. How could I go about doing this? Regards, 回答1: You can do this using the CSS position property. For example: #menu { height: 50px; left: 0; position:fixed; top: 0; } References: http://www.w3schools.com/cssref/pr_class_position.asp http://www.quirksmode.org/css/position.html The first place I noticed this used effectively is on the Perldoc site. If you

Why is skrollr preventing scrolling on ipad?

让人想犯罪 __ 提交于 2019-12-05 01:25:22
I'm trying to create a simple parallax animation with skrollr : my site is working well on Chrome/Mac but I'm seeing unusual behaviour on the ipad.. On ipad (testing on the IOS simulator), the main body of the page doesn't skroll at all (or may scroll in the background, underneath the animated div?) the animated background position (origami pattern) scrolls in the opposite direction (down is up) within the bounds defined in data-start / data-top-bottom On desktop, the effect I can simulate the effect if I hack the div#hero to be position: fixed; in chrome dev tools. The skrollr examples work

Parallax scrolling

流过昼夜 提交于 2019-12-04 23:27:37
I'm trying to make a parallax effect according to this tutorial https://www.youtube.com/watch?v=D75WTf_Y738 But my function doesn't apply to my objects. Here's the function: function parallax() { var sphereOne = document.getElementById("sphereOne"); sphereOne.style.top = window.pageYOffset +'px'; }; window.addEventListener("scroll", parallax, false); I know I can use hundreds of JQ libraries instead to achieve the effect, but want to understand what's wrong. My objects just stuck at the same place when scrolling. Here's the JSFiddle example: jsfiddle.net/hkbusbkm http://jsfiddle.net/BBaughn