I have a script in jsfiddle that works: https://jsfiddle.net/oxw4e5yh/
However in HTML doc it is not working:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);
</script>
<style>
/* Make it a marquee */
.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}
</style>
</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
</body>
</html>
The script is a css and javascript marquee to control a steady speed for the scrolling text.
Any idea what I am missing?
Also, as you can see on the fiddle, it takes a while for the text to start scrolling. Can I reduce the delay?
Call your JS function once all the DOM is ready, usually this is being done by using window.onload as follows:
window.onload = function() {
calcSpeed(75);
}
You are trying to select an element that has not been created yet.
Move your script to below the marquee
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);
</script>
put your script and style codes before the closing of body.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<script>
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);
</script>
<style>
/* Make it a marquee */
.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}</style>
</body>
</html>
this works on me
You should write all script in last of page because script will trying to find tag id's and DOM is not ready that time than give error.
Sample
<html>
<head>
<style>
/* your style here */
</style>
</head>
<body>
<!-- your html here -->
<script>
// your script here
</script>
</body>
</html>
Please read
JavaScript and CSS order
See this
function calcSpeed() {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / 1000;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
//calcSpeed(10);
}
</script>
<body onload="calcSpeed()">
I tested it on Chrome and Firefox...works perfectly. So, I presume it should work for you too.
Related
I'm working on a progress bar (in Javascript) that cycles through every second and then starts again.
I tried to change value with setInteval() but nothing helped me.
I hope for help, thanks
here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.progress {
position: relative;
width: 510px;
height: 60px;
background: #9cbab4;
overflow: hidden;
}
.progress__fill {
width: 0%;
height: 100%;
background: #009579;
transition: all 0.1s;
}
.progress__text{
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font: bold 20px 'Quicksand', sans-serif;
color: #ffffff;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress__fill"></div>
<span class="progress__text">0%</span>
</div>
<script>
setInterval(function(){
value++;
}, 1000);
function updateProgressBar(ProgressBar, value){
ProgressBar.querySelector(".progress__fill").style.width = '${value}%'
ProgressBar.querySelector(".progress__text").textContent = '${value}%'
}
</script>
</body>
</html> ```
I tried reproducing your code by changing the progress, progress__fill, and progress__text into id's and changed the <div class="__" /> into <div id="__" />:
<style>
#progress {
position: relative;
width: 510px;
height: 60px;
background: #9cbab4;
overflow: hidden;
}
#progress_fill {
width: 0%;
height: 100%;
background: #009579;
transition: all 0.1s;
}
#progress_text{
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font: bold 20px 'Quicksand', sans-serif;
color: #ffffff;
}
</style>
here's the <div /> in my repro code:
<div id="progress">
<div id="progress_fill"></div>
<span id="progress_text">0%</span>
</div>
then on the <script>, You did not have a variable for value so I made one and set the value to zero: let value = 0; then concatenated it with '%'.
I used window.setInterval then changed the querySelector to document.getElementById because of the changes above.
here's what it looks like on the script tag:
<script>
let value = 0;
window.setInterval(function() {
if (value != 100) {
value++;
document.getElementById("progress_fill").style.width = value + '%';
document.getElementById("progress_text").textContent = value + '%';
}
}, 1000);
</script>
I included an if (value != 100) to stop the cycle when it reaches 100.
Hope this helps! here's my code snippet if you want some reference:
https://jsbin.com/xiwiyew/5/edit?html
I have taken you example and played around a bit.
I have changed it up for I think suits better.
Problem one was you did not call the updateProgressBar() in your interval. So it did not work.. I think the code speaks for itself. If you have a question let me know
My code. Note: you could chose to put the two lines in the update function and move them directly in the interval function. Also the function does not have a cap now. and will go above 100% if left running long enough.
Hope this helps
value = 0;
setInterval(function() {
value++;
updateProgressBar(value);
}, 1000);
function updateProgressBar(value) {
document.querySelector(".progress__fill").style.width = value + "%"
document.querySelector(".progress__text").innerHTML = value + "%"
}
Looking at your code I am geussing you are new. Try writing out/ describing what you want in your head and try have your code replicate that. Example: I want a progressbar with a value, that increments every second. (interval function tells that now). Than the logic that looks clunky/reads less easy can be put behind a function
First of all you have to understand that variables have a scope limitations, so what you can do is get value from your innerHTML and update it in each function call. this way you can get realtime value, without storing it somewhere globally.
Here is the working code for the same.
setInterval(function () {
const progress__text = document.querySelector(".progress__text");
const progress__fill = document.querySelector(".progress__fill");
if (progress__text && progress__fill) {
let value = parseInt(progress__text.innerHTML.split("%")[0]);
if (value === 100) {
progress__fill.style.width = "0%";
progress__text.innerHTML = "0%";
} else {
progress__fill.style.width = ++value + "%";
progress__text.innerHTML = ++value + "%";
}
}
}, 100);
.progress {
position: relative;
width: 510px;
height: 60px;
background: #9cbab4;
overflow: hidden;
}
.progress__fill {
width: 0%;
height: 100%;
background: #009579;
transition: all 0.1s;
}
.progress__text {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font: bold 20px "Quicksand", sans-serif;
color: #ffffff;
}
<body>
<div class="progress">
<div class="progress__fill"></div>
<span value="0" class="progress__text">0%</span>
</div>
</body>
This isn't an accurate way of timing a animation, but pretty simple to implement
const animation = {
duration: 2, // animation length in seconds
steps: 60,
counter: 0,
incrementCounter() {
this.counter += ((1 / this.duration) * (this.steps / 1000) * 100);
this.counter = Math.min(this.counter, 100)
}
}
const draw = setInterval(updateAnimation, animation.steps);
function updateAnimation() {
animation.incrementCounter();
document.querySelector(".progress__fill").style.width = animation.counter + '%'
document.querySelector(".progress__text").textContent = animation.counter + '%'
if (animation.counter === 100) {
animation.counter = 0;
clearInterval(draw)
};
}
.progress {
position: relative;
width: 510px;
height: 60px;
background: #9cbab4;
overflow: hidden;
}
.progress__fill {
width: 0%;
height: 100%;
background: #009579;
transition: all 0.1s;
}
.progress__text {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font: bold 20px 'Quicksand', sans-serif;
color: #ffffff;
}
<div class="progress">
<div class="progress__fill"></div>
<span class="progress__text">0%</span>
</div>
I am creating a little game that should be like a 2d version of "guitar hero" (if you don't know what "guitar hero" is don't worry, it was just to give context). I have a red square creator function called squareCreator that adds each new square created a CSS class of .newMostLeftNote. Afterward, I want each one of those squares to fall down (like gravity) using the function fallingMostLeftNote. The problem is that the margin-top that function adds to the square generated by the squareCreator adds to every single square at the same time (even before the square is created), so a square could be created when the .newMostLeftNote CSS class has a margin-top of 700 and it appears way at the bottom.
How can I make it so that every square that falls, but starts falling after they appear?
Notice that in this image, every margin-top CSS property for every new generated square is exactly the same.
var mostLeftNoteMarginTop = 0;
function squareCreator(){
var newNote = document.createElement("div");
newNote.className = "newMostLeftNote";
document.body.appendChild(newNote);
}
var generationSpeed = setInterval(squareCreator, 300);
function fallingMostLeftNote() {
mostLeftNoteMarginTop += 2;
$(".newMostLeftNote").css({
'margin-top': mostLeftNoteMarginTop + 'px'
});
}
proc = setInterval(fallingMostLeftNote, 5);
.newMostLeftNote {
height: 100px;
width: 100px;
background-color: red;
margin-left: 400px;
position: absolute;
}
.mostLeftNote {
height: 100px;
width: 100px;
background-color: red;
margin-left: 300px;
position: absolute;
}
.middleNote {
height: 100px;
width: 100px;
background-color: blue;
margin-left: 600px;
position: absolute;
}
.mostRightNote {
height: 100px;
width: 100px;
background-color: green;
margin-left: 900px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Score: 0</h1>
<div class="middleNote"></div>
<div class="mostLeftNote"></div>
<div class="mostRightNote"></div>
<div class="scoreLineTop"></div>
<div class="scoreLineButtom"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="main.js" charset="utf-8"></script>
</body>
Update
var squareQuantity = [];
function squareCreator(){
var newNote = document.createElement("div");
newNote.className = "newMostLeftNote";
document.body.appendChild(newNote);
squareQuantity.push(this.newNote);
}
var generationSpeed = setInterval(squareCreator, 300);
function fallingMostLeftNote() {
mostLeftNoteMarginTop += 2;
squareQuantity[2].css({
'margin-top': mostLeftNoteMarginTop + 'px'
});
}
Instead of using javascript to update your margin-top, you could use CSS animations. Each new square will animate independently.
Here's an example for your use case:
function addSquare() {
var squaresElement = document.getElementById("squares");
var squareElement = document.createElement("div");
squareElement.className = "square";
squaresElement.append(squareElement);
}
#squares {
display: flex;
}
.square {
height: 100px;
width: 100px;
margin-right: 10px;
background-color: red;
animation-name: fall;
animation-duration: 4s;
animation-timing-function: linear;
}
/* The animation code */
#keyframes fall {
from {margin-top: 0px;}
to {margin-top: 300px;}
}
<button onclick="addSquare()">Add square</button>
<div id="squares"></div>
My approach is giving a css variable while creating divs for transform delay. If you need more complex movements, you can use the same logic for animation instead of transform.
<div class="parent"></div>
.parent {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.lets-try {
flex: 1;
background: #000;
height: 60px;
margin-right: 5px;
margin-left: 5px;
transition: all 0.5s ease-in-out var(--delay);
}
.lets-try.is-falling {
margin-top: 100px;
}
let parent = document.querySelector(".parent");
let numOfSquares = 12;
for (let i = 0; i < numOfSquares ; i++) {
let delay = i * 0.2;
let div = document.createElement('div');
div.setAttribute('class', 'lets-try');
div.setAttribute('style', `--delay:${delay}s`);
parent.appendChild(div);
}
setTimeout(() => {
let items = document.querySelectorAll(".lets-try");
[...items].forEach(item => {
item.classList.add("is-falling")
})
}, 1)
So for my final assignment I have to create an interactive website using javascript, canvas, html, and css. So I made boxes for my javascript in my canvas and I want boxes to disappear when I click on them but I don't know how to do it. Can someone help me?
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 5</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1>PART2 - JavaScript and The Canvas</h1>
</header>
<canvas id="canvas" width="1000" height="600"></canvas>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
Here is my CSS:
html {
font-size: 14px;
}
header {
background-color: white;
height: 3rem;
text-align: center;
}
h1 {
color: black;
}
h2 {
color:white;
}
body{
background-color: white;
padding-left: 50px;
padding-right: 50px;
}
#canvas {
position: absolute;
top: 8rem;
left: 8rem;
width: 700px;
height: 400px;
background: white;
animation: move 8s ease infinite;
}
#keyframes move {
50% {
transform: translate(600px, 200px);
}
}
Here is my JavaScript
randomBoxes();
function getRandomColor() {
var color = '#';
for (var i = 0; i < 6; i++) {
color += (Math.random() * 17 | 0).toString(17);
}
return color;
}
function boundryNum(theMin, theMax) {
var theRange = (theMax - theMin) + 5;
var randomNum = Math.floor((Math.random() * theRange) + theMin);
return randomNum;
}
function drawbox() {
var width = Math.floor(Math.random() * 200) +20;
var height = Math.floor(Math.random() * 400) + 20;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(boundryNum(25,800),boundryNum(25,400),width,height);
context.fillStyle = getRandomColor();
}
function randomBoxes(){
var number = Math.floor(Math.random() * 5) + 1;
//Three to six times....
while(number >= 0) {
drawbox();
number--;
}
setInterval(drawbox, 2000)
}
You havn't included any code in your question so I have just made some, the way I understand your question
<div style="left: 30px; top: 30px; border-width: 3px; border-style: solid; border-color: black; width: 150px; height: 100px; display: ;" id="box1" onclick="disappear()">
<h3>Click me</h3>
</div>
<script type="text/javascript">
function disappear() {
document.getElementById("box1").style.display = "none" ;
}
</script>
Recently I have asked a similar question about transition animation in divs. (See this post)
The Code Snippet below shows my solution.
However, the animation only works if the width is given in pixels, not as a percentage.
Does anybody know a way around this?
EDIT (More info to clarify my problem):
In this section of a website, I have a heading that should always stay the same and 3 pages of content which can be "swiped" on user input.
Thus, the span of the left margin of the page would range from -100% to +100%.
I want a swiping animation so that the user can switch from page 2 (i.e. displaying an image) to page 3 (i.e. the text correlating to the image).
Because of different browser window sizes, I need the width to be in percentages. Sadly...
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "-400px";
} else if (current == "0px") {
current = "-200px";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "0px";
} else if (current == "-400px") {
current = "-200px";
}
$(".container").css("left", current);
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 200px;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
margin: 0;
width: 600px;
padding: 0;
display: block;
position: absolute;
left: -200px;
top: 0;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
.ins {
width: 200px;
float: left;
height: 200px;
margin: 0;
padding: 0;
background-color: red;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
I have changed the left positioning for a transform on the individual elements:
Now, also, the class row is set to occupy full browser width. The container class is se to 300% (because it will make room for 3 elements). And the children are set to 33% of this, that at the end is 100% of the row.
var pos = 2; /* values 1 - 2 or 3 */
$(document).ready(function() {
$(".next").click(function() {
if (pos == 1) {
$(".container").removeClass("pos1");
$(".container").addClass("pos2");
pos++;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos3");
pos++;
}
});
$(".prev").click(function() {
if (pos == 3) {
$(".container").removeClass("pos3");
$(".container").addClass("pos2");
pos--;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos1");
pos--;
}
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 100%;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
width: 300%;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
}
.ins {
width: 33.33%;
height: 200px;
margin: 0;
padding: 0;
float: left;
transition: transform 0.5s ease-in-out;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
.pos2 .ins {
transform: translateX(-100%);
}
.pos3 .ins {
transform: translateX(-200%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container pos2">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
Narusan,
If I'm understanding your goal correctly, part of the problem is that no matter what, jQuery wants to return px units to you. You can set a percentage value, but it seems it will not then return those percentages to you.
I changed your code some to demonstrate this:
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "-200%";
} else if (current == "0%") {
current = "-100%";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "0%";
} else if (current == "-200%") {
current = "-100%";
}
$(".container").css("left", current);
});
});
You'll see that the values printed to the console are always in px, but if you inspect the DOM you'll see that the % value is being set on the element.
Approaching the problem very differently, like vals did, seems like a good approach.
It is really difficult to explain what kind of effect I mean. But let me try. :)
When you scroll down one DIV with text Block moves over a fixed background DIV with a background image. Now when the DIV on top leave the bottom area and moves to the top of the viewport you can seen the half (and later the full) new background image. But the Background Images are not moving, they are fixed. Only the Page Content with Text Blocks moves when you scroll down.
If you still see a question mark then take a look at this website, there you can see the concept in use.
So my question is how can I recreate this effect only with CSS3 and jQuery (Without YUI etc.)?
I don't really understand the logic that is needed for this to work. How do I need to animate the DIVs and where should I place them in the HTML Document.
Below you find some tests I did (But they don't work)
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
<title>Agency</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("div.blankItem").css("min-height", $(window).innerHeight()-44);
$("div.red").css("min-height", $(window).innerHeight()-44);
var windowHeight = $(window).innerHeight()+ 44;
var total = - windowHeight - 400;
$('div.red').css('-webkit-transform', 'translate3d(0,' + total + 'px,0)');
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);
$(window).resize(function() {
$("div.blankItem").css("min-height", $(window).innerHeight()-44);
$("div.red").css("min-height", $(window).innerHeight()-44);
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);
});
$(function(){
$(window).bind({scroll: Scroll, touchmove: Scroll});
});
function Scroll(){
// var op = (window.pageYOffset-$(window).innerHeight()-44-356);
// $("div.pageContentBackground").css("bottom", + op);
var scrollTop = $(window).scrollTop();
var pageYDoc = 1300;
var factor = 0.8;
var pageYViewport = pageYDoc - scrollTop;
var imageY = -1 * parseInt(pageYViewport * factor);
//var tr = -200; // You'd need to calculate this value
/**$('div.red').css("-webkit-transform", "translate3d(0, " + tr + "px, 0)");
*/
//var offset = total + $(window).scrollTop()+400;
$('div.red').css({'-webkit-transform': 'translate3d(0, '+ imageY + '%, 0)'});
// $('div.blue').stop().css('bottom', $(window).scrollTop() - $(window).innerHeight()-44-400 + "px");
console.log(offset);
}
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
ul, li {
margin: 0;
padding: 0;
}
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
}
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
body {
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
font-family: 'Open Sans', Helvetica;
color: #F0F2ED;
-webkit-font-smoothing: subpixel-antialiased !important;
}
div.pageMenu {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 44px;
background-color: #333;
z-index: 10;
opacity: 0.99;
}
a.pageMenuButton {
position: fixed;
top: 8px;
right: 44px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
div.pageHeader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #daddda;
z-index: 1;
padding-bottom: 10px;
}
div.pageContent {
position: absolute;
top: 100%;
width: 100%;
z-index: 5;
max-width: 100%;
overflow: hidden;
}
div.pageContentBackground {
position: fixed;
left: 0px;
width: 100%;
}
div.red {
background-color: red;
z-index: 2;
}
div.blue {
background-color: blue;
z-index: 3;
}
div.pageContentBody {
width: 100%;
z-index: 2;
}
div.pageContentBodyItem {
width: 100%;
height: 400px;
background-color: #fff;
display: block;
}
div.blankItem {
background: transparent;
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="pageMenu">
<div class="pageMenuLogo">
</div>
☰
</div>
<div class="pageHeader">
</div>
<div class="pageContentBackground red">
</div>
<!--<div class="pageContentBackground blue">
</div>-->
<div class="pageContent">
<div class="pageContentBody">
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
</div>
</div>
<div class="pageContentFooter">
</div>
</div>
</body>
This is my try: http://codepen.io/rafaelcastrocouto/pen/bCxAd
Although there are lots of differences in the sites, they are still kinda alike.
Notice that my parallax only woks on big screens.
The JS is pretty small:
var lastScrollTop = 0;
var backgroundImages = $('.backgroundImage');
$(window).scroll(function(e){
var st = $(this).scrollTop();
var ah = $(this).height();
backgroundImages.each(function(i){
var img = $(this);
var pos = img.position().top;
var hei = img.height();
if ((st + ah) > pos && st < (pos + hei)){
var p = ((pos - st)/ah) + 0.25;
if(i == 1) console.log(p);
img.css('background-position', '50%'+(p*100)+'%');
}
});
lastScrollTop = st;
});
$(window).scroll();