Hello guys im trying to make 2 different move in effect when i scroll on my web (show from right and shown from left). How can i make it ? can somebody help me please, i already manage to make them show from the left side, how can i make the right part
Here's my code:
Reveal from left side
<div class="container-fluid padding salimheader">
<div class="row padding">
<div class="col-lg-12 text-center reveal">
<h1>Salim Group</h1>
<hr style="width:15%; border:3px solid; color:#caa461; margin:auto;">
<br>
</div>
</div>
</div>
Reveal from right side
<div class="container-fluid padding">
<div class="row padding">
<div class="col-lg-12 text-center reveal">
<h1>Sayung Group</h1>
<hr style="width:15%; border:3px solid; color:#caa461; margin:auto;">
<br>
</div>
</div>
</div>
.reveal{
position: relative;
transform: translateX(-150px);
opacity: 0;
transition: all 1s ease;
}
.reveal.active {
transform: translateX(0px);
opacity: 1;
}
Javascript code:
window.addEventListener('scroll', reveal);
function reveal(){
var reveals = document.querySelectorAll('.reveal');
for(var i=0; i< reveals.length; i++){
var windowheight= window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 150;
if(revealtop < windowheight - revealpoint){
reveals[i].classList.add('active');
}
}
You could use a second reveal class which just has a positive 150px translate instead of negative:
.reveal-right {
transform: translateX(150px);
}
You'll need to add both the reveal and the reveal-right class to any div you want this to work on.
Related
I have a div with 12 buttons. Each one has eventListeners for mouseenter(). When user rolls over a button, the other 11 buttons fade out. I've got enough code to make your eyes bleed. But I'm having trouble consolidating it all into one function, and just using event.target.
I can get the basics going, but am having problems inserting a for loop (with a continue needed, I believe) to fade out each of the other buttons, not including the one that is being hovered over (my event.target element). You can see in my code, that currently I have a line of code for each of the other buttons, to run an opacity fade loop on them. How can I consolidate this into a single function?
Here is the code I'm running each time a button gets rolled over:
function fadeOut01() {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
}
box02.style.opacity = op;
box03.style.opacity = op;
box04.style.opacity = op;
box05.style.opacity = op;
box06.style.opacity = op;
box07.style.opacity = op;
box08.style.opacity = op;
box09.style.opacity = op;
box10.style.opacity = op;
box11.style.opacity = op;
box12.style.opacity = op;
op -= op * 0.1;
}, 20);
}
And here is the html where I define the boxes:
<div id="grid01" class="grids"><div class="gridText">video</div></div>
<div id="grid02" class="grids"><div class="gridText">broadcast</div></div>
<div id="grid03" class="grids"><div class="gridText">graphics</div></div>
<div id="grid04" class="grids"><div class="gridText">digital signage</div></div>
<div id="grid05" class="grids"><div class="gridText">3d</div></div>
<div id="grid06" class="grids"><div class="gridText">virtual sets</div></div>
<div id="grid07" class="grids"><div class="gridText">print</div></div>
<div id="grid08" class="grids"><div class="gridText">technical direction</div></div>
<div id="grid09" class="grids"><div class="gridText">live events</div></div>
<div id="grid10" class="grids"><div class="gridText">photography</div></div>
<div id="grid11" class="grids"><div class="gridText">workflow automation</div></div>
<div id="grid12" class="grids"><div class="gridText">our clients</div></div>
If I understand your question correctly, this should be solvable via the following - please see the comments below for contextualized information on how this works:
/* Query all grids of the grid-wrapper and apply same hover behavior to each */
document.querySelectorAll('.grid-wrapper .grids').forEach(function(element) {
/* Get the grid wrapper that encloses the grid element */
const gridWrapper = document.querySelector('.grid-wrapper');
/* Add mouse over event and add hover classes for both the wrapper and
grid elements */
element.addEventListener('mouseover', function() {
element.classList.add('hover');
gridWrapper.classList.add('hover');
});
/* Add mouse out event and remove hover classes for both the wrapper and
grid elements */
element.addEventListener('mouseout', function() {
element.classList.remove('hover');
gridWrapper.classList.remove('hover');
});
});
.grid-wrapper .grids {
/* Set default opacity for grid-wrapper grids */
opacity: 1;
/* Specifcy the transition behavior for opacity property of .grids.
Transition will take .35s and be delayed by .1s to reduce flickering
when moving quickly between grids */
transition: opacity 0.35s linear 0.1s;
/* Extra styles just added for presentation */
display: inline-block;
width: 150px;
height: 100px;
background: grey;
margin: 10px;
}
/* When .hover modifier class is applied to the wrapper, cause the
children (.grids) to fade out by default (we'll prevent/override this
default behavior for the actual grid child being hovered to achieve
the desired final result) */
.grid-wrapper.hover .grids {
opacity: 0.1;
}
/* Override the default grid-wrapper hover for the actual grid being
hovered to ensure
that it is still visible */
.grid-wrapper.hover .grids.hover {
opacity: 1
}
<div class="grid-wrapper">
<div id="grid01" class="grids">
<div class="gridText">video</div>
</div>
<div id="grid02" class="grids">
<div class="gridText">broadcast</div>
</div>
<div id="grid03" class="grids">
<div class="gridText">graphics</div>
</div>
<div id="grid04" class="grids">
<div class="gridText">digital signage</div>
</div>
<div id="grid05" class="grids">
<div class="gridText">3d</div>
</div>
<div id="grid06" class="grids">
<div class="gridText">virtual sets</div>
</div>
<div id="grid07" class="grids">
<div class="gridText">print</div>
</div>
<div id="grid08" class="grids">
<div class="gridText">technical direction</div>
</div>
<div id="grid09" class="grids">
<div class="gridText">live events</div>
</div>
<div id="grid10" class="grids">
<div class="gridText">photography</div>
</div>
<div id="grid11" class="grids">
<div class="gridText">workflow automation</div>
</div>
<div id="grid12" class="grids">
<div class="gridText">our clients</div>
</div>
</div>
Hope that helps!
I have three columns, in each column I have a number of blocks. On scroll the first block in each column should be fixed to the top. When you scroll down to the bottom of each column the first block should dissappear, when you scroll back up and hit the bottom of the column the first block should be fixed again.
Can anyone help me out. I'm using Vanilla JS
{
var stick = document.querySelectorAll(".stick");
window.onscroll = function() {
stickIt();
};
}
function stickIt() {
for (var i = 0; i < stick.length; i++) {
var sticky = stick[i].offsetTop;
if (window.pageYOffset >= sticky) {
stick[i].classList.add("sticky");
} else {
stick[i].classList.remove("sticky");
}
}
}
header{
height:300px;
background:#ccc;
}
.block.stick {
background: #333;
}
.block {
height: 200px;
background:#ccc;
}
section{
height:1000px;
background:#999;
}
.sticky {
position: fixed;
top: 0;
z-index:1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/4.1.2/css/foundation.css">
<header></header>
<div class="row">
<div class="small-4 columns">
<div class="stick block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="small-4 columns">
<div class="stick block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="small-4 columns">
<div class="stick block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<section></section>
I would advise you to take a look at CSS Flexbox. You can accomplish 99% of your goal using only CSS. Once you get your layout, then it's as simple as toggle a class on the parent based on scroll position.
Check out this great write up.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I wanted to make a div, and on hover on that div the contnet in the div must be scrolled to bottom, i have done the following code but its not working as desired, at the first hover it directly goes to bottom of the div height and on second hover the trasition works properly
.komal {
overflow: hidden;
height: 212px;
position: relative;
}
.imgpos {
position: absolute;
transition: all 1s ease-out 0s;
}
<div class="col-12 col-lg-4" id="outgov" style="height: auto;">
<div class="card card-shadowed card-hover-shadow komal dhiraj">
<div class="card-block text-center imgpos">
<img src="assets/home_solutions/outsourcing-governance.png" width="30%" style="margin-bottom: 20px;">
<h2 class="card-title text-center">Outsourcing Governance</h2>
<hr class="hr">
<div class="row" id="outgov_hidden" style="background-color: white; z-index: 9; margin-left:-20px; padding-bottom: 20px;">
<div class="text-center"><br>
<h4 class="modal-title" style="color: #000">Outsourcing Governance Practice Made Easy</h4>
<a style="margin-bottom:5px;" class="btn btn-info" href="#">Learn More</a>
<br><br>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function () {
var xH
$('.dhiraj').hover(
function () {
xH = $(this).children(".imgpos").css("height");
xH = parseInt(xH);
xH = xH - 280;
xH = "-" + xH + "px";
$(this).children(".imgpos").css("top", xH);
}, function () {
$(this).children(".imgpos").css("top", "0px");
});
});
I want it to be working properly so please help that what can be done to make it work properly and look good
You can check the live demo on following link: http://sequentia.xyz/demo/demo
I want to make it (desired)like: http://domo.com (A solution for every role section on homepage of given desired link)
Please help me working it as desired like domo with my current color scheme
You would have to specify the top value. Otherwise, CSS Transition would not know from what value to transition.
In short, edit your code with this:
.imgpos {
top: 0px;
position: absolute;
transition: all 1s ease-out 0s;
}
If more explanation required, please do mention.
I have two divs A and B. div A is an image. Div B is a paragraph underneath div A.
I am trying to make it so that if I put the mouse over div A, the background and font colour of div B transition to different colours without affecting div A.
I currently have the :hover selector so div B changes if someone hovers over it. But I don't know how to affect div B while hovering over div A.
Any clues on how to achieve this?
EDIT:
Please see below for the structure of my code. I'm trying to make it so that if I hover over #image1, the background of #info1 and the font colour of its paragraph would change and so on so forth for the other two images.
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out"> 1 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image2" src="res/images/aimage2.png" class="img-responsive center-block">
</div>
<div id="info2" class="col-md-12 col-sm-6">
<p class="washed-out"> 2 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image3" src="res/images/animage3.png" class="img-responsive center-block">
</div>
<div id="info3" class="col-md-12 col-sm-6">
<p class="washed-out"> 3 </p>
</div>
</div>
</div>
</div>
css:
.washed-out{
background: white;
color: black;
transition: background-color 300ms linear, color 1s linear;
}
.washed-out:hover{
background: black;
color: white;
}
You use the sibling selector ~ or the immediate sibling selector +
img:hover + div {
color: red;
}
<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
Update based on comment, possible CSS version
.hoverme:hover + div .washed-out {
color: red;
background: black;
}
<div class="col-md-12 col-sm-6 hoverme">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out">1</p>
</div>
Update based on comment, possible JS version
window.addEventListener('load', function() {
var imglist = document.querySelectorAll('img.img-responsive');
for (var i = 0; i < imglist.length; i++) {
imglist[i].addEventListener('mouseover', function(e) { e.target.parentElement.nextElementSibling.classList.add('infos');
})
imglist[i].addEventListener('mouseout', function(e) { e.target.parentElement.nextElementSibling.classList.remove('infos');
})
}
})
div.infos .washed-out {
color: red;
background: black;
}
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out">1</p>
</div>
You're looking for the adjacent sibling selector - element:hover + element:
.container {
width: 100px;
height: 100px;
background: red;
transition: all 0.5s;
}
.container:first-child {
margin-bottom: 10px;
}
/** if the 1st element is hovered, changed the 2nd **/
.container:hover + .container {
background: blue;
color: white;
}
<div class="container">Div 1</div>
<div class="container">Div 2</div>
What you want can be done by javascript event handler.
Something like this:
var d1 = document.getElementById("div1"); // on hover on this div
var d2 = document.getElementById("div2"); // bring changes to this
d1.addEventListener("hover", callfun, false);
function callfun(){
d2.style.backgroundColor = 'blue';
}
Good luck
Basically you need to register a hovering in and out handler as shown in the following answer:
Event listener hover changing other element
Here is a slightly modified version of it to fit more closely to your need.
document.getElementById("Div-A").addEventListener("mouseenter",function (){
document.getElementById("Div-B").style.backgroundColor = "red";
document.getElementById("Div-B").style.backgroundColor = "Yellow";
});
document.getElementById("Div-A").addEventListener("mouseout",function (){
document.getElementById("Div-B").style.backgroundColor = "";
document.getElementById("Div-B").style.text = "";
});
Use successor siblings ~ or immediate successor siblings + to make any change on hover
img:hover ~ div {
color: red;
}
<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
<div>Hey there...I also get red when you hover the image</div>
<script>
function Myfunc1(){
document.getElementById("div1").style.backgroundColor = "green"
document.getElementById("div2").style.backgroundColor = "white"}
function Myfunc2(){
document.getElementById("div2").style.backgroundColor = "red"
document.getElementById("div1").style.backgroundColor = "white"}
</script>
<pre><div id="div1" onmouseover="Myfunc1()"><img src=""><p> look</p></div>
<div id="div2" onmouseover="Myfunc2()"><p>here</p></div></pre>
is there a way to get jquery masonry working with percentage width divs?
I'm trying to create a fluid layout with 25%, 50%, 75% and 100% widths. But as soon as i set the widths with % the automatic resizing stops working, and if I try to manually trigger mason onresize I get rounding errors that makes the divs jump around. Also it becomes quite buggy that it sometimes ignores the height, and sometimes just stops placing the divs and put them all on 0,0
HTML markup:
<div class="boxes">
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-2">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-3">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
</div>
CSS properties:
.weight-1 {
width:25%;
}
.weight-2 {
width:50%;
}
.weight-3 {
width:75%;
}
.weight-4 {
width:100%;
}
Muchos gracias for any input,
J
forget the .wight stuff add only this in css
.box {
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
masonry js
$(function(){
var container = $('#boxes');
container.imagesLoaded(function(){
container.masonry({
itemSelector: '.box',
columnWidth: function( containerWidth ) {
return containerWidth /4;// depends how many boxes per row
}(), // () to execute the anonymous function right away and use its result
isAnimated: true
});
});
});
change holder div to
<div id="boxes" class="masonry clearfix">
and boxes to
<div class="box">...</div>
( note that Firefox might cause bit issue with exact divider of 100 like 25% so set the boxes at 24.9 or 24% )outdated.
Use box-sizing to avoid drooping column issue.
i have same problem, try, try, and try, and this work for me.
.masonry-brick {
width:25%;/*or others percents*/
/*following properties, fix problem*/
margin-left:-1px;
transform:translateX(1px);
}
I had the same problem … solved it with css calc option. That works fine, but not on resizing the windows, then it gets a bit mad …
#media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}
#media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}
#media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}
If you want 25% width not 24.9% add margin-left:-1px!important; to your box