I'm trying to recreate the parallax effect that can be seen on Apple's iPhone 6s webpage: click
The iPhone objects have a slight, floaty, parallax animation when you scroll up or down. I'd like to find an easy way to recreate this for multiple objects on my webpage. I've found ScrollMagic and Skrollr but they seem overly complex for what I am trying to accomplish.
So for example, how would I animate these black boxes to animate the same way as the iPhones?
Does anyone know of a quick way to implement this with HTML/CSS/JS?
Thanks for the help!
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
html{
height: 1500px;
width: 800px;
}
.box1{
position: relative;
background-color: black;
height: 150px;
width: 150px;
top: 260px;
left: 56%;
}
.box2{
position: relative;
background-color: black;
height: 150px;
width: 150px;
top: 360px;
left: 56%;
}
.box3{
position: relative;
background-color: black;
height: 150px;
width: 150px;
top: 260px;
left: 16%;
}
.box4{
position: relative;
background-color: black;
height: 150px;
width: 150px;
top: 320px;
left: 86%;
}
My comment was moderated so I will try once more.
The following code might help you.
$( window ).scroll(e=>{
// get scroll direction
let direction = 'down';
if ( this.oldScroll > this.scrollY ) direction = 'up';
this.oldScroll = this.scrollY;
animate('.box1', direction);
animate('.box2', direction, 3);
});
function animate( element, direction, speed, smooth ){
element = $( element )
speed = speed || 2;
smooth = smooth || 2;
// get element offset
let Y = parseInt( element.attr('data-y') || 0 );
// Calculate movement
if ( direction == 'down' ) Y = Y - (1*speed)
else Y = Y + (1*speed)
// Apply values
element.css({
'transition': smooth + 's transform',
'transform' : 'translateY(' + Y.toFixed(2) + 'px)',
})
// store new element offset
element.attr('data-y', Y)
}
You execute the function for each element on windows scroll. You can pass values for the speed and smoothness of the movement.
The function calculates the movement and applies transform: translateY() and transition: 2s transform; attributes to the element.
I have a more complete version of the code on code.actus.works/act-parallax
Related
I am trying to achieve the following effect: https://github.com/thispagedoesntexist (the one that the character has)
I want my image to move just slightly according to where I move my mouse. Maybe it has something to do with 3d transformation and scaling ... I don't know
I browsed the web and tried to come up with something by myself, but I couldn't. Here's where I stpoped:
HTML
<img class="image" id="module-hotjar" src="./img/image.png" alt="">
CSS
.image{
position: fixed;
z-index: 1;
display: flex;
bottom: -300px;
height: 90vh;
left: 15%;
transition: 0.3s ease;
transform: translate(0px, 0px);
}
JS
var image = document.querySelector('.image');
let root = document.documentElement;
root.addEventListener('mousemove', (e) => {
;
x = e.offsetX / 10;
y = e.offsetY / 10;
image.style.transform = `translate(${x}px,${y}px)`;
});
Thank you
You're on the right track. To achieve this parallax effect, you can apply different ratios to the elements. The difficult part is finding/creating the right images and finding the correct ratios, so that it looks kind of "realistic":
const background = document.querySelector('.background'),
patrick = document.querySelector('.patrick'),
bob = document.querySelector('.bob'),
root = document.documentElement;
root.addEventListener('mousemove', (e) => {
const x = e.clientX,
y = e.clientY;
background.style.transform = `translate(${-x / 20}px,${-y / 40}px)`;
patrick.style.transform = `translate(${-x / 15}px,${-y / 40}px)`;
bob.style.transform = `translate(${x / 10}px,${y / 10}px)`;
});
.background{
position: fixed;
bottom: -5vh;
width: 110vw;
left: -5vw;
}
.patrick{
position: fixed;
bottom: -7vh;
height: 90vh;
right: 10%;
margin-left: -25%;
}
.bob{
position: fixed;
bottom: -10vh;
height: 90vh;
left: 50%;
margin-left: -25%;
}
<img class="background" src="https://wallpaperaccess.com/full/3896911.jpg" />
<img class="patrick" src="https://assets.stickpng.com/thumbs/5cb78e9b7ff3656569c8cec1.png" />
<img class="bob" src="https://lh3.googleusercontent.com/proxy/wHCNlCMGLIi4Fa3QQlxyLRw_uyZoLauUFpMCDzSowxbjmA6gy12KqK6Fe6XD45T6EWas1dimdsh7Rfl3Mv9w3Z28iJAKCqaQLu8TChGV8yzbRqL7WpwHozSPaDYBJIefwmayIaROJ7M" />
I found a piece of code that almost does what I want except I want it to be horizontal / based on mouse Y instead of X. Now I understand that in the js X will be changed to Y, but I struggle with rotating the divs.
Also, if I want to put some text over it, how would I do so that the background change affects the text colour (so if the text is black and half of the background is black, to make sure once when the black background overlays the text, text colour changes to another or gets inverted for example?
Also also, I tried to figure out in js which part dictates the responsiveness of the mouse movement, i.e., how would you do so that the colour shifting is not lagging after the mouse but I couldn't figure out?
https://codepen.io/erutuf/pen/NJLwqV
haml
#banner-wrapper.banner-wrapper
.banner.design
.banner-content
.banner.dev
.banner-content
scss
body {
margin: 0;
padding: 0;
.banner-wrapper {
position: relative;
width: 100%;
height: 400px;
overflow: hidden; background:red;
}
.banner {
position: absolute;
overflow: hidden;
&.dev {
margin-left: -500px;
width: calc(50vw + 500px);
.banner-content {
margin-left: 500px; background:black;
}
}
.banner-content {
height: 400px;
}
img {
width: 100vw;
}
}
}
js
document.addEventListener('DOMContentLoaded', function(){
let banner = document.getElementById('banner-wrapper');
let devLayer = banner.querySelector('.dev');
let delta = 0;
banner.addEventListener('mousemove', function(e){
delta = (e.clientX - window.innerWidth / 2) * 0.5;
devLayer.style.width = e.clientX + 500 + delta + 'px';
});
})
you can play with JS + CSS. The following code can be your starting point :).
btw i'm adapting code from your link https://codepen.io/erutuf/pen/NJLwqV
document.addEventListener("DOMContentLoaded", function(){
let banner = document.getElementById("banner-wrapper");
let devLayer = banner.querySelector(".dev");
let delta = 0;
// play with div's height
banner.addEventListener("mousemove", function(e){
delta = (e.clientY - window.innerHeight / 2) * 0.5;
devLayer.style.height = e.clientY + delta + "px";
});
})
<div class="banner-wrapper" id="banner-wrapper">
<div class="banner design">
<div class="banner-content">BANNER TEXT</div>
</div>
<div class="banner dev">
<div class="banner-content"></div>
</div>
</div>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
body .banner-wrapper {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background: red;
}
body .banner {
position: absolute;
overflow: hidden;
}
body .banner.dev {
width: 100%;
/* play with responsiveness here. note that 0.1 is more responsive than 0.5. more info : https://www.w3schools.com/css/css3_transitions.asp */
-webkit-transition: height 0.2s linear;
transition: height 0.2s ease;
}
body .banner.dev .banner-content {
background: black;
}
body .banner .banner-content {
height: 400px;
}
body .banner img {
width: 100%;
}
.banner.design {
margin-top: -25px;
height: 50px;
top: 50%;
font-size: 50px;
/* set color & mix-blend-mode for text color vs background color effect. more info : https://css-tricks.com/methods-contrasting-text-backgrounds/ */
mix-blend-mode: difference;
color: #fff;
z-index: 1;
margin-left: -175px;
left: 50%;
width: 350px;
}
</style>
I realise this used to be the default behaviour of getBoundingClientRect() but it seems that I'm in the rare position of needing this feature!
I have a CSS animation that moves a div across the Y axis using translate. However, I want the finishing position of the div ...but before the animation has even begun.
Is there any (neat) way of doing this assuming I have no knowledge of the animation parameters?
You can use getBoundingClientRect just as is.
Here is an example:
var element = document.getElementById("move");
window.setInterval(function() {
var structure = element.getBoundingClientRect();
element.innerHTML = "left: " + Math.floor(structure.left) + "px<br/> top: " + Math.floor(structure.top) + "px";
}, 100);
body {
background-color: #222;
height: 450px;
}
#move {
position: absolute;
width: 200px;
height: 200px;
background-color: white;
animation: move 5s infinite alternate;
}
#keyframes move {
from {
left: 0;
top: 0;
}
to {
left: calc(100% - 200px);
top: calc(100% - 200px);
}
}
<div id="move">HELLO!</div>
I am using this script to create a parallax scroll effect on my page:
$(window).scroll(function (e) {
parallax();
});
function parallax() {
var scrolled = $(window).scrollTop();
$('.cloud1').css('top', - (scrolled * 0.1) + '%');
$('.cloud2').css('top', - (scrolled * 0.3) + '%');
$('.cloud3').css('top', - (scrolled * 0.2) + '%');
}
HTML:
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
CSS (same for .cloud2 and .cloud3 but with different background image, opacity and 'top' 'left'):
.cloud1 {
background: url(../images/cloud1.png) no-repeat;
opacity: 0.9;
position: fixed;
width: 100%;
height: 100%;
top: 50%;
left: 20%;
z-index: 1;
}
When the script begins (on scroll) the HTML changes to this:
<div class="cloud1" style="top: 0%; "></div>
which makes the 'cloud' jump to the top of the page, and then the parallax starts (which you can see for a very short period of time as it's already jumped to the top of the page)
Is there a way to set the style="top: 0%;" to start at say 20% when the parallax begins, and then begin to multiply by 0.1?
Here is a codepen of the problem : http://codepen.io/anon/pen/tkfDH
Hopefully this is clear,
Any help is appreciated
Jon
Okay so I think i've fixed the problem.
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.cloud1').css('top', -(scrolled*0.1)+70+'%');
// the 70 corresponds to the 'cloud1' value for 'top'.
$('.cloud2').css('top', -(scrolled*0.3)+50+'%');
// the 50 corresponds to the 'cloud2' value for 'top'.
}
http://cdpn.io/naIjf
#hero {
background:black;
color: white;
}
.cloud1, .cloud2 {
opacity: 0.8;
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
}
.cloud1 {
background: url('http://www.jrk-design.co.uk/v2/images/big-cloud.png') no-repeat;
top: 70%;
left: 0;
}
.cloud2 {
background: url('http://www.jrk-design.co.uk/v2/images/big-cloud.png') no-repeat;
top: 50%;
left: 65%;
}
Fixed the jump.
Hope this helps.
I would like to do something with my document which is quite unique (haven't seen it before) and thus maybe not even possible.
What I would like is to have a div which will overlay everything in the document, maybe give it background black so that nothing is visible. Second I would like to have a small squire window in the overlay which doesn't share the black background, in fact it is somewhat transparent and therefore it would be possible to 'peek' trough that window to see document content. But only the content where this window is. It would be kinda like those "zoom" plugins in which only a small portion is being zoomed, but in this case it would show specific content. Any idea how to create such a thing?
An example of what you can do is the following (it may not be the best but it works)
HTML
<div id='peakview'></div> <!-- This div is your view window -->
<div id='out'>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
</div>
The <div> inside of #out will re-size accordingly to the position of #peakview creating the illusion of a full overlay. This can be done with simple css and some calculus.
Mainly what you need is the position of the element on screen.
var h = $(this).offset().top;
var l = $(this).offset().left;
var r = ($(window).width() - ($(this).offset().left + $(this).outerWidth()));
//right offset
var b = ($(window).height() - ($(this).offset().top + $(this).outerWidth()));
//bottom offset
In my example I used .draggable() from jQuery UI to move the div around. And while dragging the 4 divs shown above are adjusting their height and width to fill up the space between #peakview and document border.
An example for the first div
$('.overlay:eq(0)').css({
top: 0,
left: 0,
width: '100%',
height: h //the height is always changing depending on the #peakview .offset().top
});
In this fiddle you will see how the filling divs behave
Another ruff start:
http://jsfiddle.net/XDrSA/
This require some extra work, but it may suit your needs.
HTML:
<div id="yourContent" style="width: 300px; margin:100px auto;">
<input type="button" id="zoom" value="Click to zoom"/>
</div>
<div id="zoomer">
<div id="window">This is your "window"</div>
<div id="overlay_top"></div>
<div id="overlay_left"></div>
<div id="overlay_right"></div>
<div id="overlay_bottom"></div>
</div>
CSS:
body {
margin:0;
padding:0;
}
#zoomer {
height: 100%;
width: 100%;
position: absolute;
top: 0;
display: none;
}
#overlay_top {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
top: 0
}
#overlay_right {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
right: 0;
}
#overlay_left {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
left: 0;
}
#overlay_bottom {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
bottom: 0;
}
#window {
margin: 0 auto;
height: 100%;
width: 80%;
position: absolute;
background-color: rgba(0,0,0,.5);
}
And a piece of javascript:
$('#zoom').click(function() {
$('#zoomer').fadeIn();
});
You may need to stumble with the positioning, and the window will be a fixed size one. Not draggable though.