I have been trying to figure out how to rotate a div based off of my scrolling. I have a codepen that demonstrates the behaviour that I would like to achieve.
However, I do not know hot to make it work with scrolling. Essentially, I would like to scroll down and have the word Data move in a counter-clockwise rotation. And if I decide to scroll up and down it should move with the speed of the scroll. I only want it to move 90deg up or down.
Thanks!
var btn = document.querySelector('.button');
var btnUp = document.querySelector('.button-up')
btnUp.addEventListener('click', function() {
document.querySelector(".parent").style.webkitTransform = "rotate(-90deg)";
document.querySelector(".child").style.webkitTransform = "rotate(90deg)";
});
btn.addEventListener('click', function() {
document.querySelector(".parent").style.webkitTransform = "rotate(0deg)";
document.querySelector(".child").style.webkitTransform = "rotate(0deg)";
});
.parent {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
transform: rotate(-0deg);
transition: transform 0.7s linear;
margin: 100px auto 30px auto;
}
.child {
position: absolute;
transform: rotate(-0deg);
transition: transform 0.7s linear;
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center;
top: 278px;
/* -child size/2 */
left: 130px;
/* parent size/2 - child size/2 */
}
<div class="parent">
<div class="child">
Data
</div>
</div>
<button class="button">Click Down</button>
<button class="button-up">Click Up</button>
Add
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
and in script
<script>
AOS.init();
</script>
then in div
<div data-aos="fade-down"></div> //you can use whatever you want's
for further information
this website helps you on how to make it work
and
You can find out more at AOS Animation
Related
I am using AJAX to call a servlet from my webpage. So far so good, I have added some code to show a loading screen while the servlet is working but that works only the first time, after that, the servlet is called and I can change the cursor but the waiting screen is not working
CSS
#loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.75;
background-color: #ffffff;
-webkit-transition: all .5s ease;
z-index: 3000;
display:none;
vertical-align: middle;
text-align: center;
}
#loading-img {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #297bda;
width: 50px;
height: 50px;
margin: auto;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
padding: 2rem;
}
HTML
<div id="loading">
<div id="loading-img"></div>
</div>
Javascript
$('#compare').click(function() {
//just the relevant part
$('#loading').show();
....
});
I am calling to
$('#loading').hide();
in the .done(function (data).
As I said, the code is executed but the loading screen only loads the first time. In fact, the second time and further I am receiving null when trying to resolve the loading div.
I have also tried with
document.getElementById("loading").style.visibility = "hidden";
document.getElementById("loading").style.display = "none";
Instead of using the hide() but the same result.
Any idea?
Found it! after hours, it was my stupid mistake.
I got this
<div id="finalresults">
<div>
<div id="loading">
<div id="loading-img"></div>
</div>
and was doing
document.getElementById("finalresults").innerHTML = "";
During the ajax call, so I was deleting the loading div bercause I forgot the / in the previous div
Thanks everyone and really sorry for the mistake
I want to make an auto scrolling image. Here is what I've tried.
Scrolling image
Here is my code.
<style>
.scroll_container {
width: 100%;
height: 200px;
/* background-color: #ddd; */
overflow: hidden;
}
.ads_box_holder {
width: 100%;
white-space: nowrap;
min-width:100%;
width: auto !important;
width: 100%;
}
.ads_box {
display: inline-block;
position: relative;
top: 0;
left: 0;
width: 190px;
height: 200px;
padding: 10px 10px;
margin-right: 10px;
}
.ads_box img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: slide 20s infinite;
}
#keyframes slide {
0%{ transform:translateX(0px) }
10%{ transform:translateX(-200px) }
20%{ transform:translateX(-400px) }
30%{ transform:translateX(-600px) }
40%{ transform:translateX(-800px) }
50%{ transform:translateX(-1000px) }
60%{ transform:translateX(-1200px) }
70%{ transform:translateX(-1400px) }
80%{ transform:translateX(-1600px) }
90%{ transform:translateX(-1800px) }
100%{ transform:translateX(0px) }
}
<style>
<div class="scroll_container">
<div class="ads_box_holder">
<div class="ads_box"><img src="images/ads.png"></div>
<div class="ads_box"><img src="images/blur.jpg"></div>
<div class="ads_box"><img src="images/foot.jpg"></div>
<div class="ads_box"><img src="images/body.jpg"></div>
<div class="ads_box"><img src="images/s.png"></div>
<div class="ads_box"><img src="images/menu.jpg"></div>
<div class="ads_box"><img src="images/face.jpg"></div>
<div class="ads_box"><img src="images/c.jpeg"></div>
<div class="ads_box"><img src="images/foot2.jpg"></div>
<div class="ads_box"><img src="images/b.jpg"></div>
</div>
</div>
Now, I used keyframe css. So, when images move to left one after another, there has empty space in the right side as shown in below
---------
| |
| image | empty space are left here
| |
---------
In the reality, I want to add my images dynamically and images may be over 20 images. So, I'm not sure this keyframes is ok or not when images add dynamically.
I want to replace that empty space to the all of the images inside this box.
So, there is no empty space left and images are always scroll one after another.
But, I don't know how to replace images when space found inside ads_box_holder div.
And I remove css animation and also tried with javascript like this.
<script>
$(document).ready(function(){
var childCount = $(".ads_box_holder :visible").children().length;
var move = 0;
var hideImageTime = 0;
window.setInterval(function(){
hideImageTime += 1;
move += 200;
$(".ads_box_holder").css({
"margin-left":-move+"px",
});
if(hideImageTime > childCount) {
jQuery('.ads_box_holder .ads_box').each(function(){
var next = jQuery(this).next();
count += 1;
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
});
}
},2000);
});
</script>
But it is the same result when I use keyframe css.
NOTE: The image moving style is ok but I just want to place all images when empty space found inside ads_box_holder.
I have no idea how to achieve what I want. I'm really appreciate for any suggestion.
Finally I got what I want. Clone first child and append at last of ads_box_holder and remove first child.
$(document).ready(function(){
function animation() {
$('.ads_box_holder').children(':first').clone().appendTo(".ads_box_holder");
$('.ads_box_holder').children(':first').css({
"margin-left":"-204px",
"-webkit-transition": "all 0.7s ease-out",
"-moz-transition": "all 0.7s ease-out",
"-ms-transition": "all 0.7s ease-out",
"-o-transition": "all 0.7s ease-out",
"transition": "all 0.7s ease-out"
});
setTimeout(function(){$('.ads_box_holder').children(':first').remove()},1500);
}
window.setInterval(animation,2000);
});
I hope it will help for someone.
I have a menu system where there are two hamburger menus. I'm trying to work out how to have JS trigger both instances of these menu icons. They both have all have the same classes.
I've tried adding a for loop, to loop through anything with the instance of the classes, but this didn't seem to work, and I'm going around in endless circles now.
With the code below I've kept the index number of the three menu bars in the first hamburger men at zero[0] so that you can see the desired effect of what happens when you click on the top hamburger menu.
I'd like it so that when I click on either hamburger menu the animation of the bars happens on both icons and the state of the blue box changes.
Any help would be amazing.
Codepen link is here: https://codepen.io/emilychews/pen/jwwVam
Code is below.
JAVASCRIPT
var container = document.getElementsByClassName('container')[0],
bar1 = document.getElementsByClassName('bar1')[0],
bar2 = document.getElementsByClassName('bar2')[0],
bar3 = document.getElementsByClassName('bar3')[0],
box = document.getElementsByClassName('box')[0],
openMenu = false; // used for toggle
container.onclick = function(){
if(openMenu === false) {
bar1.classList.add("bar1_open");
bar2.classList.add("bar2_open");
bar3.classList.add("bar3_open");
box.classList.add("changeBackground");
openMenu = true;
} else {
bar1.classList.remove("bar1_open");
bar2.classList.remove("bar2_open");
bar3.classList.remove("bar3_open");
box.classList.remove("changeBackground");
openMenu = false;
}
};
CSS
* {padding: 0; margin: 0;}
body {height: 200vh; font-family: arial;}
/* red square */
.container {
margin: 10px;
width: 100px;
height: 100px;
background: red;
padding: 0px;
position: relative;
}
/* properties for all menu bar lines */
.bar {
position: absolute;
height: 4px;
width: 60px;
background: blue;
left: 20px;
}
/* 1st menu line */
.bar1 {
position: absolute;
top: 28px;
margin: 0 auto;
transform-origin: top right;
transition: transform .5s;
}
/* 2nd menu line */
.bar2 {
position: absolute;
top: 48px;
margin: 0 auto;
transition: opacity 1s;
}
/* 3rd menu line */
.bar3 {
position: absolute;
top: 68px;
margin: 0 auto;
transform-origin: right bottom;
transition: transform .5s;
}
.bar1_open{
transform-origin: top right;
transform: rotate(-45deg) translate(-7px, -7px);
transition: transform .5s .1s ease-out ;
}
.bar2_open {
opacity: 0;
transition: opacity .2s ease-in;
}
.bar3_open {
top: 69px;
transform-origin: right bottom;
transform: rotate(45deg) translate(-7px, 7px);
transition: transform .5s .1s ease-out;
}
.box {
padding: 10px;
width: 200px;
height: 100px;
background: blue;
position: absolute;
left: 300px;
top: 30px;
z-index: 99;
color: white;
display: flex;
justify-content: center;
align-items: center
}
.changeBackground {
background: red;
}
HTML
<div class="container">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
<!-- second hamburger menu button that currently has no JS -->
<div class="container">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
<div class="box"> This toggles after 1st hamburger menu is clicked</div>
I have refined your code to work how you want it, i set the variables to the array of DOM Elements instead of the single one and for loop through them.
EDIT: heres the updated codepen if you'd like to take a look https://codepen.io/anon/pen/LLBEeQ
var container = document.getElementsByClassName('container'),
bar1 = document.getElementsByClassName('bar1'),
bar2 = document.getElementsByClassName('bar2'),
bar3 = document.getElementsByClassName('bar3'),
box = document.getElementsByClassName('box')[0],
openMenu = false; // used for toggle
for(var i=0; i < container.length; i++){
container[i].onclick = function(){
if(openMenu === false) {
for(var j = 0;j<bar1.length;j++){
bar1[j].classList.add("bar1_open");
bar2[j].classList.add("bar2_open");
bar3[j].classList.add("bar3_open");
}
box.classList.add("changeBackground");
openMenu = true;
} else {
for(var j = 0;j<bar1.length;j++){
bar1[j].classList.remove("bar1_open");
bar2[j].classList.remove("bar2_open");
bar3[j].classList.remove("bar3_open");
}
box.classList.remove("changeBackground");
openMenu = false;
}
}
};
If you are ok with using JQuery this works perfect:
HTML(link to jquery):
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Javascript:
var container = document.getElementsByClassName('container')[0];
console.log(container);
var bar1 = document.getElementsByClassName('bar1')[0],
bar2 = document.getElementsByClassName('bar2')[0],
bar3 = document.getElementsByClassName('bar3')[0],
box = document.getElementsByClassName('box')[0],
openMenu = false; // used for toggle
$(".container").click(function(){
if(openMenu === false) {
$(".bar1").addClass("bar1_open");
$(".bar2").addClass("bar2_open");
$(".bar3").addClass("bar3_open");
box.classList.add("changeBackground");
openMenu = true;
} else {
$(".bar1").removeClass("bar1_open");
$(".bar2").removeClass("bar2_open");
$(".bar3").removeClass("bar3_open");
box.classList.remove("changeBackground");
openMenu = false;
}
});
I'm using the below; but the margin isn't nearly as approximate as text-align:center; is there anyway I could toggle text-align: center; to occur with a animation transition until it gets to the point of text-align: center; similar to that which is achieved with the below.
if ($(".resource-section").hasClass("resource-section--expanded")) {
$(".resources__header h2").animate({"marginLeft": "40%"}, "slow");
}
You can use a centering technique that allows you to horizontally center any element.
It can be animated using only CSS
.test {
position: absolute;
transform: translateX(0%);
left: 0%;
animation: center 2s infinite;
}
#keyframes center {
0%, 10% {
transform: translateX(0%);
left: 0%;
}
90%, 100% {
transform: translateX(-50%);
left: 50%;
}
}
<h1 class="test">TEST</h1>
You could animate center align using margin-left like this
var h1 = $('h1').width();
var parent = $('.container').width();
$('h1').animate({'margin-left':(parent/2-h1/2)}, 1500);
.container {
border: 1px solid black;
height: 100px;
}
h1 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Text</h1>
</div>
From what i understood if you want to use the text-align:center property something like this could be of help to you, but the text-align property can't be animated
$(function(){
$('.resources_header h2').click(function(){
$(this).toggleClass('align-center');
});
});
.align-center{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>
A problem with this is the animation so if what you want to achieve is to animate from left to center then why not:
$(function(){
$('.resources_header h2').click(function(){
var windowHalfWidth = $(window).width()/2;
$(this).css('position','absolute');
var elemHalfWidth = $(this).width()/2;
var left = windowHalfWidth - elemHalfWidth;
$(this).animate({
marginLeft: left
},"slow",function(){
$(this).css('position','static');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>
I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.
I have my overlay image stacked ontop of my main image, and it's set to "display: none;".
I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".main").mouseenter(function() {
jQuery(".overlay").fadeIn();
});
jQuery(".main").mouseleave(function() {
jQuery(".overlay").fadeOut();
});
});
</script>
and my HTML code:
<style type="text/css">
<!--
.hoverbox { position: relative; }
.main { width: 243px; height: 117px; }
.overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>
<!-- button 1 -->
<div class="hoverbox" style="float: left; width: 243px; height: 117px;">
<a href="/locations/sacramento-international-airport/">
<img class="main" src="/images/home-button-smf_orig.jpg" />
<img class="overlay" src="/images/home-button-smf_rollover.jpg" />
</a>
</div>
<!-- end button 1 -->
Try this instead:
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
I think hovering over the image itself was a bad idea, here I use the parent container. Also, using the on() method is now the preferred way to trigger mouse enter and leave events.
Good luck!
Michael's answer is a good one and will work, but it may be preferable to use CSS transitions for the animation and reserve jQuery for the behavior.
Here's a demo.
JavaScript
$(".hoverbox")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
CSS
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-transition: .4s;
}
.hoverbox.on .overlay {
opacity: 1;
}
Here's a demo of the former approach (similar to Michael's answer). Also, your CSS has been cleaned up for both examples.
css is enough in this case, try the below code
.main:hover + .overlay{ display:block; }
and make sure overlay has a higher z-index
.overlay {
position: absolute; width: 243px; height: 117px;
top: 0; left: 0; display: none; z-index: 2;
}
http://jsfiddle.net/Grhqn/1/
for graceful fading
.overlay {
position: absolute; width: 243px; height: 117px; top: 0;
left: 0; z-index: 2; transition: opacity 1.5s ease; opacity:0;
}
.overlay:hover { opacity:1; }
http://jsfiddle.net/Grhqn/3/