Building a fluid mosaic grid

Building a fluid mosaic grid - javascript

I'm trying to build a fluid mosaic grid. I used the fluid word since i already have a working mosaic grid.
You can check a fiddle i made on purpose for this question: https://jsfiddle.net/a995w8ye/
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Teste</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="divContainer">
<div id="1" class="cube">
</div>
<div id="2" class="cube">
</div>
<div id="3" class="cube">
</div>
<div id="4" class="cube">
</div>
<div id="5" class="cube">
</div>
<div id="6" class="cube">
</div>
<div id="7" class="cube">
</div>
<div id="8" class="cube">
</div>
<div id="9" class="cube">
</div>
</div> <!-- End of div container -->
</body>
</html>
CSS:
#divContainer {
width: 1000px;
height: 800px;
border: 1px solid black;
}
.cube {
position: relative;
float: left;
width: calc(1000px/3);
height: calc(800px/3);
cursor: pointer;
}
.cube.fullscreen{
z-index: 9;
width: 100%;
height: 100%;
position: relative;
background-color: #131313;
}
.cube:hover {
opacity: 0.75;
}
JS:
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function fillColors(){
for (var i = 1; i<=9; i++)
{
document.getElementById(i).style.background = getRandomColor();
}
}
window.onload=function(){
fillColors();
$('.cube').on('click', function() {
$(this).addClass('fullscreen');
$('.cube').each(function(){
if($(this).hasClass('fullscreen'))
{
return true;
}
$(this).hide();
})
})
}
The width and height if each cube are 1/3 of the main div. They are left float and they have a relative position. I need a relative position since the "divContainer" in the real case doesn't have a fixed size and in that case, since all cubes have exactly 1/3(width and height) of it they will make a perfect grid that can be 3x3 or even 1x9.
When a user click in a cube, that cube get's another class with a higher z-index and the width and heigh equal to his parent. The other cubes won't be visible in the end. They might or might not disappear. In the end I just want to see the expanded cube that i clicked.
This is simple. What i want to do is to make a cube expand slowly while the others vanish slowly as well or at least cover the others with a higher z-index. This is easy to achieve in the top left cube using .animate() but in the middle cube or the bottom right one i find difficult to do this.
P.S: ATM I'm not worried about everything come back to his original state. I just want to expand every div as mentioned.
Any suggestions?
Thanks in advance

UPDATE
I've fixed the code based on your comment
var container = $('#container'),
cubes = $('#container > div'),
count = 3, unit = 'vw',
fullstate = false;
function randomcolor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function fillcolor(){
$(this).css({background: randomcolor()});
}
function setup () {
var t = $(this),
i = t.index();
t.data({
top: Math.floor(i/count) * 100/count,
left: (i%count) * 100/count
});
}
function gridposition () {
var t = $(this);
t.css({
'z-index': 0,
top: t.data('top') + unit,
left: t.data('left') + unit,
width: 100/count + unit,
height: 100/count + unit
});
}
function fullcube () {
$(this).css({
'z-index': 9,
width: 100 + unit,
height: 100 + unit,
top: 0,
left: 0
});
}
cubes.each(function () {
setup.call(this);
fillcolor.call(this);
gridposition.call(this);
}).on('click', function () {
if (fullstate) {
cubes.each(gridposition);
} else {
fullcube.call(this);
}
fullstate = !fullstate;
});
html,
body,
#container,
#container > div.fullscreen {
width: 100%; height: 100%;
}
body {
margin: 0;
overflow-x: hidden;
}
#container > div {
position: absolute;
transition: all 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div></div> <div></div> <div></div>
<div></div> <div></div> <div></div>
<div></div> <div></div> <div></div>
</div>
OLD ANSWER
This is how I would solve this problem:
var container = $('#container'),
cubes = $('#container > div');
function randomcolor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function fillcolor(){
$(this).css({background: randomcolor()});
}
cubes.each(fillcolor).on('click', function () {
var h = 'hidden';
cubes.toggleClass(h);
$(this).removeClass(h).toggleClass('fullscreen');
});
html,
body,
#container,
#container > div.fullscreen {
width: 100%; height: 100%;
}
body {
margin: 0;
}
#container > div {
float: left;
width: 32vw; height: 32vw;
transition: all 0.5s;
}
#container > div:hover {
opacity: 0.75;
}
#container > div.hidden {
width: 0; height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div></div> <div></div> <div></div>
<div></div> <div></div> <div></div>
<div></div> <div></div> <div></div>
</div>

Related

How to change size of the circles if the screen size changed?

I saw a code on the internet and i was trying to change the size of the circle according to the screen size , i tried to place the whole JS code in if statement and a function i saw in a website, it worked but it needs to refresh the page after scaling , so is it possible to change the size of circles with changing size of screen ?
I got the code from :https://codepen.io/Yago/pen/WNbxjYw
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
function myFunction(x) {
if (x.matches) { // If media query matches
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape:'round',
emptyFill:'#d4d4d4',
fill: {
color: '#1F88E9'
},
size:80
})
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
} else {
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape:'round',
emptyFill:'#d4d4d4',
fill: {
color: '#1F88E9'
},
size:150
})
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction)
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 100px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>

I will not concentrate on quality, #mplungjan did a better job with quality but your issue is that you have to add resize event listener and also invalidate the animate true when your animation is done so that the condition can run again to resize the circles, you will notice that this will re-animate whenever you resize the page.
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
function myFunction(x) {
let size = 150;
if (x.matches) {
// If media query matches
size = 80;
}
function animateElements() {
$(".progressbar").each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find(".circle").attr("data-percent");
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data("animate");
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data("animate", true);
$(this)
.find(".circle")
.circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape: "round",
emptyFill: "#d4d4d4",
fill: {
color: "#1F88E9",
},
size: size,
});
$(this).data("animate", false);
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
}
var x = window.matchMedia("(max-width: 700px)");
myFunction(x);
$(window).on("resize", function (e) {
var x = window.matchMedia("(max-width: 700px)");
myFunction(x); // Call listener function at run time
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 100px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>

Vary the size:
Working code:
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 4,
lincCape: 'round',
emptyFill: '#d4d4d4',
fill: {
color: '#1F88E9'
},
size: $(this).width() / 2
})
$(this).data("animate", false); // added this!
}
})
}
$(function() {
// Show animated elements
$(window).on("resize scroll", animateElements);
});
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>

You can add an eventListener on "resize":
document.addEventListener("resize", handleResize);
And then change the size in handleResize. I'm not sure why you don't use CSS media queries instead of javascript though.

add this to your css
#media only screen and (max-width: 600px) {
.circle {
width: 50%;
}
}

animate opacity in and out on scroll

So I have a set of elements called .project-slide, one after the other. Some of these will have the .colour-change class, IF they do have this class they will change the background colour of the .background element when they come into view. This is what I've got so far: https://codepen.io/neal_fletcher/pen/eGmmvJ
But I'm looking to achieve something like this: http://studio.institute/clients/nike/
Scroll through the page to see the background change. So in my case what I'd want is that when a .colour-change was coming into view it would slowly animate the opacity in of the .background element, then slowly animate the opacity out as I scroll past it (animating on scroll that is).
Any suggestions on how I could achieve that would be greatly appreciated!
HTML:
<div class="project-slide fullscreen">
SLIDE ONE
</div>
<div class="project-slide fullscreen">
SLIDE TWO
</div>
<div class="project-slide fullscreen colour-change" data-bg="#EA8D02">
SLIDE THREE
</div>
<div class="project-slide fullscreen">
SLIDE TWO
</div>
<div class="project-slide fullscreen colour-change" data-bg="#cccccc">
SLIDE THREE
</div>
</div>
jQuery:
$(window).on('scroll', function () {
$('.project-slide').each(function() {
if ($(window).scrollTop() >= $(this).offset().top - ($(window).height() / 2)) {
if($(this).hasClass('colour-change')) {
var bgCol = $(this).attr('data-bg');
$('.background').css('background-color', bgCol);
} else {
}
} else {
}
});
});

Set some data-gb-color with RGB values like 255,0,0…
Calculate the currently tracked element in-viewport-height.
than get the 0..1 value of the inViewport element height and use it as the Alpha channel for the RGB color:
/**
* inViewport jQuery plugin by Roko C.B.
* http://stackoverflow.com/a/26831113/383904
* Returns a callback function with an argument holding
* the current amount of px an element is visible in viewport
* (The min returned value is 0 (element outside of viewport)
*/
;
(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i, el) {
function visPx() {
var elH = $(el).outerHeight(),
H = $(win).height(),
r = el.getBoundingClientRect(),
t = r.top,
b = r.bottom;
return cb.call(el, Math.max(0, t > 0 ? Math.min(elH, H - t) : (b < H ? b : H)), H);
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
// OK. Let's do it
var $wrap = $(".background");
$("[data-bg-color]").inViewport(function(px, winH) {
var opacity = (px - winH) / winH + 1;
if (opacity <= 0) return; // Ignore if value is 0
$wrap.css({background: "rgba(" + this.dataset.bgColor + ", " + opacity + ")"});
});
/*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
.project-slide {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.project-slide h2 {
font-weight: 100;
font-size: 10vw;
}
<div class="project-slides-wrap background">
<div class="project-slide">
<h2>when in trouble...</h2>
</div>
<div class="project-slide" data-bg-color="0,200,255">
<h2>real trouble...</h2>
</div>
<div class="project-slide">
<h2>ask...</h2>
</div>
<div class="project-slide" data-bg-color="244,128,36">
<h2>stack<b>overflow</b></h2>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Looks like that effect is using two fixed divs so if you need something simple like that you can do it like this:
But if you need something more complicated use #Roko's answer.
var fixed = $(".fixed");
var fixed2 = $(".fixed2");
$( window ).scroll(function() {
var top = $( window ).scrollTop();
var opacity = (top)/300;
if( opacity > 1 )
opacity = 1;
fixed.css("opacity",opacity);
if( fixed.css('opacity') == 1 ) {
top = 0;
opacity = (top += $( window ).scrollTop()-400)/300;
if( opacity > 1 )
opacity = 1;
fixed2.css("opacity",opacity);
}
});
.fixed{
display: block;
width: 100%;
height: 200px;
background: blue;
position: fixed;
top: 0px;
left: 0px;
color: #FFF;
padding: 0px;
margin: 0px;
opacity: 0;
}
.fixed2{
display: block;
width: 100%;
height: 200px;
background: red;
position: fixed;
top: 0px;
left: 0px;
color: #FFF;
padding: 0px;
margin: 0px;
opacity: 0;
}
.container{
display: inline-block;
width: 100%;
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Scroll me!!
</div>
<div class="fixed">
</div>
<div class="fixed2">
</div>

jQuery calculate the number of line breaks in a div?

So I have a div wrap whose size is a percentage of the screen width. Inside this wrap is multiple .item divs. As the window gets smaller it breaks into new lines obviously.
I wrote some code which basically takes the width of the wrap and divides it by the sum of the widths of the .item boxes. But the flaw is that it looks at it thinking how many boxes could fit in total, were one to mix and match them perfectly like building blocks, but that's not how it works because the ordering is stagnant.
How could I make this logic work?
CodePen
jQuery:
var itemWidth = 0;
var lineCount = 1;
$(window).on('resize', function(){
var lineWidth = $('.line').width();
var itemWidthSum = 0;
lineCount=1;
$('.item').each(function(index, element) {
if(itemWidthSum < (lineWidth - $(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = 0;
}
});
});
HTML:
<div id="container">
<div class="rect">
<div class="line">
</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
</div>
<h1 class="answer"></h1>
CSS:
body {
padding:25px;
}
.answer {
position:fixed;
bottom:0;
left:0;
}
#container {
border: 1px solid rgb(200,200,200);
height: auto;
width: 30%;
margin:0 auto;
}
.item {
padding: 10px;
background-color: #aef2bd;
float: left;
}
.rect {
height: 100px;
width:100%;
position: relative;
}
.rect .line {
position:absolute;
height:50px;
width: 100%;
bottom:0;
border-top: 1px solid red;
}

Figured out my logic mistake by debugging each step.
The correct jQuery:
var itemWidth = 0;
var lineCount = 1;
$(window).on('resize', function(){
var lineWidth = $('.line').width();
var itemWidthSum = 0;
var list = [];
lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
});

Parallax based on mousemove has different offset

How can I have the same parallax offset in all the sections? Right now the offset increases as you add more sections. Note that in section .two and .three the parallax is different from section .one. I want section .two and .three to have the same parallax as in section .one. I am unsure what's causing the divs to go wider in section .two and .three.
Why is this happening and how can I fix it?
JSFiddle
Thank you in advance.
JS
var currentX = '';
var currentY = '';
var movementConstant = .05;
$(document).mousemove(function(e) {
var xToCenter = e.pageX - window.innerWidth/2;
var yToCenter = e.pageY - window.innerHeight/2;
$('.parallax div').each( function(i) {
var $el = $(this);
var newX = (i + 1) * (xToCenter * movementConstant);
var newY = (i + 1) * (yToCenter * movementConstant);
$el.css({left: newX + 'px', top: newY + 'px'});
});
});
HTML
<section class="one">
<div class="parallax">
<div class="asset asset-layer4">4</div>
<div class="asset asset-layer3">3</div>
<div class="asset asset-layer2">2</div>
<div class="asset asset-layer1">1</div>
</div>
</section>
<section class="two">
<div class="parallax">
<div class="asset asset-layer4">4</div>
<div class="asset asset-layer3">3</div>
<div class="asset asset-layer2">2</div>
<div class="asset asset-layer1">1</div>
</div>
</section>
<section class="three">
<div class="parallax">
<div class="asset asset-layer4">4</div>
<div class="asset asset-layer3">3</div>
<div class="asset asset-layer2">2</div>
<div class="asset asset-layer1">1</div>
</div>
</section>
CSS
.one,
.two,
.three {
position: relative;
width: 100%;
height: 200px;
}
.one { background-color: pink; }
.two { background-color: lightgray; }
.three { background-color: orange; }
.parallax {
position: absolute;
left: 50%;
top: 50%;
bottom: 50%;
right: 50%;
overflow: visible;
}
.asset {
position: absolute;
}
.asset-layer1 {
background-color: yellow;
}
.asset-layer2 {
background-color: green;
}
.asset-layer3 {
background-color: blue;
}
.asset-layer4 {
background-color: red;
}
body {
overflow:hidden;
}

the issue is that you are doing an each over ALL over the children div of .parallax. This means you are looping about 11 times. Each time you multiply by a larger i value, so it starts to look off.
Instead, what I have done is within each Parallax container, you will loop through it's children, giving you a value from 0-3. Now they are in sync!
https://jsfiddle.net/p4hrbdge/2/
$('.parallax').each( function(i) {
$(this).find('div').each(function(i) {
var $el = $(this);
var newX = (i + 1) * (xToCenter * movementConstant);
var newY = (i + 1) * (yToCenter * movementConstant);
$el.css({left: newX + 'px', top: newY + 'px'});
})
});

Slide to next div

HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
/* overflow: hidden;*/
}
.inline-wrapper{
width: 400%;
height: 100%;
font-size: 0;
position: relative;
}
.inline-blocks{
display: inline-block;
width: 25%;
height: 100%;
vertical-align: top;
position: relative;
}
>.inline-blocks:nth-child(1){
background-color: #000;
}
.inline-blocks:nth-child(2){
background-color: blue;
}
.inline-blocks:nth-child(3){
background-color: red;
}
.inline-blocks:nth-child(4){
background-color: green;
}
How can I slide them without ID?
In fact this is the work of the slider. But I can not understand the logic.
Want to understand how flipping without ID.
We must check the blocks and give them сurrent class.

Auto Slide
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
jQuery:
(function () {
var numDivs = $('.inline-wrapper').children().length; //Count children ELements
var counter = 1;
function slide(time, counter) {
var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
var position = $currentDiv.position(); //get position of next element
if (numDivs > 1) {
$('html,body').animate({
scrollLeft: position.left
}, time / 2); //Animate to next element
}
};
$('.inline-blocks').on('click', function () {
counter = counter + 1;
slide(2000, counter);
});
})();
DEMO

Develop Reference

JavaScript is the programming language of the Web.

Building a fluid mosaic grid - javascript

Related

How to change size of the circles if the screen size changed?

animate opacity in and out on scroll

jQuery calculate the number of line breaks in a div?

Parallax based on mousemove has different offset

Slide to next div

Categories

Resources