How is the scroll effect on the iphone 11 site built? - javascript

site - https://www.apple.com/iphone-11-pro/
I feel like I this is such a simple effect but I can't seem to wrap my head around how to achieve it. ( I am talking about the way elements are layered behind each other )
I figured it was some mix of position:fixed/sticky but I don't see how that is possible without a bunch of height: ~100vh etc and I hope that isnt how the effect is achieved on their site...
I don't even know what the proper name of this effect is to google it.
If anyone has any resources I could read up on or videos to watch, id greatly appreciate it.
Thank you.

I would use position: absolute for both objects and declare their z-index order to show based on which layer is up-front.
I also see an overflow:hidden style a lot whenever you want to place an element's extra pixels away or behind other elements.
#b1 {
background-color:red;
height:100px;
width:100px;
display:table;
position: absolute;
z-index:1;
}
#b2 {
background-color:blue;
height:100px;
width:100px;
display:table;
position: absolute;
left:50px;
top:50px;
z-index:2;
}
<div id="b1"></div>
<div id="b2"></div>

AOS is a jquery library for on scroll animations
an example of usage
<div data-aos="fade-up"
data-aos-duration="2000">
</div>
The site explains as your scroll.
some nice tutorials keithclark, codepen , w3schools

Related

Make a div position relative to another that is static

I'm trying to make a fullscreen site, also responsive, but on smaller screens the elements in the container overflow making it not 100% it varies depending on how many items are in it. Using:
top:100%;
position:relative;
width:100%;
height:100%
works, only if the screen is a certain size, on mobile devices using that it doest work, and appears half on the previous container.
Is there a way to position from the bottom of the element rather than top?
http://jsfiddle.net/q8tvwm2k/2/
Update:
Never minds found a pretty bad but working solution.
I'm pretty sure you really want a position:absolute to have another div relative to it. You just didn't word the question correctly. position:relative sets the point to which its children can be position:absolute, which is where you want to use top and the like. This is the structure you need to see:
HTML
<div class='surround'>
<div class='inside'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</div>
</div>
CSS
.surround{
position:relative;
}
.inside{
height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
height:100px; width:100px; position:relative;
}
.inner{
position:absolute; top:30px; left:10px;
}

jquery - inserting a header section on an existing webpage

I am trying to inject a banner div
<div id='banner'></div>
on top of an existing webpage in such a manner so that when a person scrolls the webpage the banner remains on top. Also the webpage should be pushed down by the banner so that every part of the page remains accessible.
Here is my CSS:
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
}
Here is my jquery:
$("body").prepend("<div id='banner'></div>");
I tried using jquery to find all divs that were fixed and changing them to relative before executing the above line but still the banner does not work. The error is shown in the following picture https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing
Please Help.
And I am not looking for ad revenue here this is just a practice task.
Here is a jsFiddle I have created. The banner div is at the top of the page.
It stays at the top while scrolling.
The HTML:
<div class="page">
</div>
The css:
.oldBody
{
width:100%;
height: 3000px;
background-color: navy;
margin-top:250px;
}
#banner
{
position:fixed;
top:0px;
background-color:#FFFFFF;
width:100%;
height:250px;
border:2px solid;
z-index:10000;
}
The JS:
$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");
Please maintain z-index of banner div.Z-index should be grater then other div on that page.
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
z-index : 99999
}
i'd just like to present a different way to create the element:
var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
this technique for creating elements with jquery comes in handy when you have several different element to create. as a note, you can also create the element like so:
var $banner = $('<div/>').attr('id', 'banner');
I think the best way is first keep your ad on top in relative position when a person scroll page your function check the page-scroll .scrollTop() and then add fixed position on banner ad container just like freeze header, if you need further help in this regard let me know, I will provide you code. thanks I hope this technique will help you

CSS3 Animating full page container with several children causes lag

Whenever I try to animate my container (described below), I'm often experiencing some lag (like choppy movement) of the container. I've made some re-search and tried some stuff, but haven't found a solution. The only thing I did found out tho, was that if I remove all images but one, everything works smooth.
So by eliminating all the images, and just having one there, solves the issue. But I need all the images.. the functionality is a slideshow actually (regular fade transition of images).
Please take a look at my setup, and notice me if I'm doing any bad things here (currently only for WebKit):
<div id="container">
<div id="inner">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
[...]
</div>
</div>
With the CSS:
#container {
width:100%;
height:100%
position:absolute;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 800ms linear;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d; /* *should* improve performance? */
}
#inner {
position:relative;
width:100%;
height:100%;
}
.image {
position:absolute;
left:0;
top:0;
background-image:[something];
width:100%;
height:100%;
background-size:cover;
}
Then I just do a couple of these in my code to make the container move around
$('#container').css('-webkit-transform', 'translate3d(0,500px,0)');
Thanks in advance!
EDIT: Here's a fiddle btw (remember that the result-window is very small here, which gives me nice smoothness. But in full-screen, its a bit choppy)
EDIT2: Fixed the broken fiddle!
In this case, you have a lag probably because you are moving the container with all of the images (and these images are big). The browser need to calculate new positions for every DOM element that are change the position and move it (that mean redraw all of these big images) in all steps of animation.
If you move only one DOM element with image the animation should be smooth:
$('.image').css('-webkit-transform', 'translate3d(0,500px,0)');
here you have a fsfidde that move only one DOM element.
Animation lags are often in such cases, because of overload. Maybe you should do some images preload.
Just like it is shown here
And full manual here

how do i re-position fixed Header & Footer?

I have got some issues when using fixed Header & Footer,
But some suggest on me to use Position: Absolute instead of Fixed
and re-position Header and footer when scroll using JavaScript Code,
Does any one know how to do this?
Or this issue faced him.
Any suggestion would be helpful.
Best Regards.
Ahmed, I just came over here from the other thread we had been discussing. Your question isn't clear enough for the other folks to answer. Your question should include the fact that you need to trigger the javascript function to reposition on a specific event.
One way you could do this is this:
Change the elments to absolute position instead of fixed. Don't use fixed at all. Then make the javacript function for positioning elements fire every time the browser window scrolls or finishes scrolling. By doing it this way, the elements will always be moved into view after user finishes scrolling. They will actually pop into view which will look ugly. To make them smoothly move into view, you'll have to extend it further by using css3 transistions OR interpolating the position gradually with javascript. On iOS5 and iOS6, you should be able to use css3 transitions just fine. They would be VERY easy to implement. CSS3 transitions make javascript controlled animations a piece of cake.
The hard part will be implementing the javascript to compute the element positions and then fire the event after the browser finishes scrolling.
Hopefully some other folks can chime in if I've got the right direction.
Vote me up, bro. :)
See if the code below helps (notice how the margin adjustments use negative values that are half the size of the div that is being positioned):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#text_center {
text-align: center;
width: 200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-20px;
}
#text_bottom {
text-align: center;
width: 200px;
position:absolute;
left:50%;
bottom:1%;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="text_center">Text 1</div>
<div id="text_bottom">Text 2</div>
</body>
</html>

div that sticks to the top when you scroll past it in jquery

For example...the new facebook activity stream on the right. Or on okay cupid (the message/rating dialogue).
How does this work exactly. Can someone point me to a tutorial or explanation?
Thanks!
There are many ways to do this but here is one using CSS only
<div style="position:fixed; left:0; top:0; height:100px; width:100%">Stuck to Top</div>
Here is a fiddle
http://jsfiddle.net/2kmQe/
Add some Javascript to set position: fixed; top: 0px; when $(window).scrollTop() reaches the $("#element_id").offset().top.
Google does a similar thing with their new gmail look

Categories