Exploring web, I found this amazing effect on this site http://www.guglieri.com/
(the scrolling effect)
I want to build a script that recreates the same effect but I don't understand the logical behavior.
Basically, I started to calculate the body height setting the position property of each section to "absolute" and summing the height of the body to the height of each section.
Now, the idea is to save into an array the offset of each one and, when scrolltop is major or equals to this offset... I start to move section to top through the translateY property and I stop moving when it is equals to the height of the viewport. But now I'm stuck!!
I googled for an already existing plugin but I didn't found anything. So please help me to found a solution ;)
Concept here:
var
body = $('body')
section = $('section');
section.each(function(i,el){
$(el).css({
'z-index' : section.length - i
})
body.height(body.height()+$(el).height());
});
body {
margin: 0;
}
section {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
font-family: sans-serif;
}
section.a {
background-color:indianred
}
section.b {
background-color:royalblue
}
section.c {
background-color:deepskyblue
}
section.d {
background-color:tomato;
}
section div {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
font-size: 6em;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="a">
<div>a</div>
</section>
<section class="b">
<div>b</div>
</section>
<section class="c">
<div>c</div>
</section>
<section class="d">
<div>d</div>
</section>
It's parallax effect.
Here's a simple parallax script: http://pixelcog.github.io/parallax.js/
There are other more scripts on the web also tutorials on how to make your own parallax effect depending on your needs.
You can try pagePiling.js, but the difference is this one uses auto scrolling.
A similar effect can be achieved by using the fullPage.js parallax extension with the options offset:100 autoScrolling:false.
Related
Hi i'm learning html/css and javascript and I think I'm having an issue with my html structure. Basically what I want to do is that my particles animation stays on the website while scrolling the page. I have a Javascript file that does a getElementById('particles') to run the canvas on a div but it only stays on the first page.
I tried to move the "particles" div as a main div that will contain all the sections but it didn't work.
Here's the repository of the files if anyone is interested: https://github.com/DanielVillacis/DanielVillacis.github.io
Here's my html structure :
document.addEventListener('DOMContentLoaded', function() {
particleground(document.getElementById('particles'), {
dotColor: '#FFFFFF',
lineColor: '#FFFFFF'
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
html,
body {
width: 100%;
height: 100vh;
}
canvas {
display: inline-block;
vertical-align: baseline;
}
header,
section {
display: block;
}
#particles {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section {
height: 100vh;
width: 100%;
display: inline-block;
scroll-snap-align: start;
}
<body>
<div class="container">
<main role="main">
<section class="intro">
<div id="particles">
<header class="splash" id="splash" role="banner">
<div id="intro">
</div>
</header>
</div>
</section>
<section class="AboutMe">
<div class="introduction">
</div>
</section>
<section class="box">
<div class="projectContainer">
</div>
</section>
<section class="Contact">
<h2 class="ContactTitle">Contact</h2>
<div class="contactLinks">
</div>
</section>
</main>
</div>
</body>
Use the CSS position: fixed; property.
With position set to fixed, your canvas is positioned relative to the viewport and hence would remain even while scrolling.
.pg-canvas {
display: block;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100vh;
}
You have put the particles (which are shown on a canvas) into a section which will scroll out of view.
The particles library you are using places this canvas just before the element you have given it, which has id particles.
You can fix just the canvas by adding position: fixed to the canvas selector in your style sheet (watch out if you have other canvases to give a more definite selector).
This will work in many cases to fix the canvas with the particles to the viewport. But note this description from MDN
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to the initial containing block established by the viewport, except
when one of its ancestors has a transform, perspective, or filter
property set to something other than none (see the CSS Transforms
Spec), in which case that ancestor behaves as the containing block.
(Note that there are browser inconsistencies with perspective and
filter contributing to containing block formation.) Its final position
is determined by the values of top, right, bottom, and left.
You are OK at the moment because you move intro with top but if that were a translate you’d have to put the canvas out of intro.
I have a floating sidebar which is located on the right of the page which I want to be able to resize using a handle on the left of the container.
At the moment, when I drag the sidebar using the handle, it makes the sidebar wider when dragging right, and smaller when dragging left - I wan't it to do the inverse of this. i.e., dragging to the left increases the size of the sidebar etc..
I would prefer to not change the html structure and hopefully have a simple line of javascript to fix the problem - please help!
Here is a fiddle: https://jsfiddle.net/c01gat3/us8vktjq/
html
<div id="sidebar">
<div id="drag">
</div>
</div>
css
#sidebar{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100% !important;
background-color: blue;
}
#drag{
position: absolute;
left: -10px;
width: 10px;
height: 100%;
background-color:black;
cursor:ew-resize;
}
Javascript
$('#sidebar').resizable({
minWidth: 100,
handles: { "w" : $("#drag") }
});
You're missing the associated CSS file.
Add the following reference to your HTML page:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Adjust your HTML code to include the needed classes:
<div id="sidebar">
<div id="drag" class="ui-resizable-handle ui-resizable-w">
</div>
</div>
Working fiddle here: https://jsfiddle.net/us8vktjq/2/
Read more here: http://api.jqueryui.com/resizable/#option-handles
My code is:
HTML:
<section>
<div id="banner">
<div class="container">
<p class="para">hello world</p>
</div>
<div class="container banner-bottom">
<div class="card card-primary text-center z-depth-2 contact-main-text">
<div class="card-block">
<p class="white-text">Please fill out the form below and ESC
staff will be in contact with you shortly.</p>
</div>
</div>
</div>
</div>
</section>
CSS:
.para{
color:white;
background: red;
padding:70px;
text-align:center;}
.white-text{
background:green;
padding:20px;}
Output is: Bootply
And i want:
Could anyone help me with that?
You can set negative top margin to overlay the second div, see the live example:
<div class="container banner-bottom" style="margin-top:-5%;padding:2%">
http://www.bootply.com/MorC45NB4V
PS: I have used inline css just to show, avoid inline css.
My solution uses jQuery and some calculations. My calculation works even if you move the elements around the document. I also used CSS for the margins you wanted.
jQuery
//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});
CSS
p.white-text{
margin-left:5%;
margin-right:5%;
}
Output
bootply
1) In case you want your lower banner to have a full width:
You could add position: relative; to the lower banner and position it adding a bottom value and use margin to create the same visual effect asked in the question.
.banner-bottom {
position: relative;
bottom: 45px;
margin: 0 40px;
}
2) In case you don't need to have a banner with full width and just center it, then no need to use margins. Remember to set one parent as position: relative;:
#banner { position:relative;}
.banner-bottom {
position: absolute;
top:75%;
right:0;
bottom:auto;
left:0;
}
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
Here's my solution for this.
Basically just make the position of the card block "relative", position the "top" position accordingly, then set the margin to "auto" to center it.
.card-block {
position: relative;
top: -50px;
margin: auto;
width: 80%;
}
A bit of position could help you, here's a rough version that will hopefully get you thinking what you need to do:
#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }
Heres a forked bootply: http://www.bootply.com/Imuh4wUj50
For a website I'm designing directly with CSS and Foundation 5, I am centering all content vertically in the middle of the viewport when the content area is taller than the browser window.
I found an excellent pure CSS solution that works perfectly. I'm very happy with the current behavior when the content area is small enough to fit entirely within the viewport without a scroll fold. I fairly sure that I don't need or want any kind of vertical centering when the content is long enough for scrolling.
The problem is that when there is too much content to fit on the screen, the CSS crops off the header and makes it impossible to scroll up to see the top of the content.
The CSS I adapted from davidwalsh.name uses a transformation to raise the container by half its height after its top was placed 50% down from the top.
#non-framework-container {
height: 100%;
width: 100%;
}
#non-framework-wrapper {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
This is applied to these two nested containers around the Foundation classes.
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
[...]
</header>
[...]
</div>
</div>
I want to disable the CSS when the content (specifically #non-framework-container) is taller than the viewport. I was hoping it would be as simple as this bit of JQuery:
$(document).ready(function) {
if ( $("#non-framework-container").height() > $(window).height() ) {
$("#non-framework-wrapper").css("position":"static", "top":"0", "transform":"none");
}
});
Unfortunately, my script doesn't do anything, no matter the amount of content or the browser size (and regardless of whether I load it in the head tag or at the bottom of the body tag).
I love how the CSS transformation method works, so I'm reluctant to try a pure JavaScript solution.
Try this (not tested, cannot currently test where I am):
HTML:
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
<h1>Your mom makes the best pizza</h1>
</header>
</div>
</div>
CSS:
#non-framework-container {
height: 100%;
width: 100%;
}
.transform {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
JAVASCRIPT:
var div = $("#non-framework-wrapper").height();
var winSize = $(window).height();
$(document).ready(function() {
if (div < winSize) {
$("#non-framework-wrapper").addClass('transform');
} else {
$("#non-framework-wrapper").removeClass('transform');
}
});
This is a hard one to explain so bear with me (or just skip straight to the jsfiddle)
I have a Div with a max-height defined and overlow-x set to scroll. Within this Div there are a bunch of list items (in this instance, addresses). Naturally there can be many of these and they can overflow, which works fine. What I want is a 'cover' div that indicates that this panel is disabled. I have done this by putting an absolutely positioned div within the main div, like so.
<div style="max-height:150px;overflow:auto;position:relative">
<ul>
<li>Church Walk, Access To Foxholes Farm, DT2 9HG
</li>
<li>Garden Cottage, Access To Foxholes Farm, DT2 9HG
</li>
<li>Little Bride, Access To Foxholes Farm, DT2 9HG
</li>
...etc
</ul>
<div id="overlayDiv" style="display:none;background-color:white;position:absolute;top:0px;opacity:0.8;height:100%;width:100% ">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
This then appears when the user does something, overlaying the content and making it appear disabled. Great! The problem occurs when my list items overflow. When the overlay div appears it only covers the current visible portion of the parent div, meaning that if I scroll down the div it appears 'uncovered' as the cover div only spans the height of the parent, not including its overflow.
This is really hard to explain so please go to my jsfiddle and click one of the addresses. You'll see that the div gets covered. If you then scroll down that div you will see that the items at the bottom of the list are uncovered.
This also works in reverse so if you click the 'Hide the overlay div' button to get rid of the cover and then click one of the addresses at the bottom of the list, you'll see that the 'cover' still only covers the top part of the div.
Any ideas on how you go about making that cover div extend the entire height of its parent, including the overflow? Other alternative solutions are welcomed and encouraged. Bear in mind that I don't necessarily need the 'Searching' text that gets overlaid on top, just the 'cover' would be enough.
3 divs instead of 2 works well:
http://jsfiddle.net/JhGCn/2/
html:
<div id="geogPickerAddressResultContainer" style="max-height:150px;overflow:auto;position:relative">
<div id="insideDiv">
<ul ...
</ul>
<div id="overlayDiv" style="display:none;">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
</div>
css:
#insideDiv {
width: 100%;
height: 100%;
position: relative;
}
#overlayDiv {
background-color: white;
position: absolute;
top: 0px;
opacity: 0.8;
height: 100%;
width: 100%;
}
this works fine too:
http://jsfiddle.net/JhGCn/3/
var height = $('#addressPicker li').height();
$.each($('#addressPicker li'), function (i, addr) {
height += $(this).height();
$('#overlayDiv').css("height", height + "px");
etc..
I would take the overlay out of the parent, set a z-index and position it over the address picker with negative margin.
http://jsfiddle.net/JhGCn/1/
#overlayDiv{
background-color: white;
opacity: 0.8;
height: 100%;
width:100%;
position:absolute;
z-index:9999;
margin-top:-150px;
height:150px;
}
This a pattern I've seen before as well: http://jsfiddle.net/6oa6grn9/
#overlayDiv {
background-color: white;
opacity: 0.8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}