Parallax floating image <div>
Question
How can I make a scrolling animation like this? (The floating glasses image that scrolls "faster" then the content).
I haven't been able to find any articles or answers regarding this "feature" other then regular background parallax scrolling. I would be most grateful if someone could point me in the right direction.
Fiddle: Fiddle
HTML:
<body>
<div class="floating-img"></div>
<div class="site-width">
<h2 class="content-heading">Content heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat enim at metus posuere maximus eget in enim. Nunc massa metus, laoreet vel sem nec, lacinia bibendum diam. Ut rutrum lacus vitae feugiat fringilla. Sed id ultricies magna. Curabitur
aliquam cursus est quis pretium. Fusce vel arcu eget felis eleifend tempor. Donec molestie eu urna in gravida.
<br>
<br> Nam feugiat mauris elementum, aliquam purus non, ultrices orci. Fusce venenatis ac nisl sed eleifend. Integer convallis orci ut ante laoreet, id ullamcorper tortor iaculis. Suspendisse feugiat est et dolor maximus, eget egestas elit tempor. Pellentesque
quis diam aliquam, ornare dolor ac, ultricies ligula. Duis non mollis justo. Nunc arcu justo, commodo eu eros non, faucibus viverra diam. Sed nec ipsum vitae neque consectetur malesuada lobortis id nisl. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Donec dictum varius massa id egestas. Quisque feugiat dolor ligula, eget ultrices lorem faucibus eu. Morbi hendrerit posuere eleifend. Sed eu fringilla mauris, ornare tincidunt nisl. Nulla id
sollicitudin nisi, in interdum neque. Cras vulputate rhoncus ante, sit amet auctor nisl suscipit sit amet.
<br>
<br> Aenean ultricies feugiat arcu, in varius lorem lacinia quis. Quisque elementum lorem egestas, pellentesque tortor ut, auctor risus. Nullam nec augue vel tortor lobortis pulvinar. Nulla ultricies nunc ut tristique sagittis. Donec pulvinar purus
ut elementum commodo. Etiam elementum odio vel est ultricies, ac dapibus tortor eleifend. Nullam cursus quam arcu, quis bibendum ex molestie non. Phasellus convallis tincidunt fermentum.
</div>
</body>
</html>
CSS:
.floating-img {
position: absolute;
width: 100%;
height: 100%;
background-image: url('https://familytime.io/img/ios-app-block-before.png');
background-repeat: no-repeat;
background-size: 20%;
z-index: -1;
}
.site-width {
padding: 0px 50px;
}
.content-heading {
text-align: center;
}
Just ask if you need any clarification!
Thanks beforehand! :)
/ Erik
1 answers
solution1
0 ACCPTED 2018-02-06 10:21:48
I found what you've been looking for. This is a really good js library which does exactly what you want: http://mmkjony.github.io/enllax.js/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.