why this angularjs animation does not work? - javascript

The animation doesn't work. I could not fint what I am wrong.
Here is the code.
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-messages.js"></script>
<script src="js.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-hide="hidden == true" ng-animate="'slide'">
<h1>Come and get it!</h1>
</div>
<div ng-hide="hidden == false" ng-animate="'slide'">
<h1>Fine.</h1>
</div>
<div>
<button ng-click="hidden=true">I don't want it</button>
<button ng-click="hidden=false">I want it</button>
</div>
</div>
</body>
</html>
CSS
.slide-container {
height: 100px;
position: relative;
}
.slide-container > * {
display:block;
width:100%;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;
}
.slide-hide, .slide-show {
-webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: absolute;
}
.slide-hide {
background: red;
display: none;
}
.slide-hide.slide-hide-active {
background: red;
display: none;
}
.slide-show {
background: red;
position: relative;
left: 100px;
}
.slide-show.slide-show-active {
background: red;
position: relative;
left: 0px;
}
JS
angular.module('myApp', [])
.controller('AppCtrl', function ($scope) {
$scope.hidden = false;
});
I got this code from http://jsfiddle.net/elthrasher/Uz2Dk/. In the fiddle, It works perfectly, but once I moved the code in my editor, I doesn't work! I just want to get the function that when a button is clicked, the contents are changed with an animation. For example, left flying animation.

Related

How to change burger menu color on different background color while scrolling?

can you help me with this please? I tried the tips of other questions but unfortunately that didn't help. I want to change the color of my custom burger menu (with hover effect) depending on the background color of different sections. Here is my HTML and CSS:
https://jsfiddle.net/s4gh8cw9/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<style>
.section {
width: 100%;
height: 450px;
background-color: white;
}
.section-black {
width: 100%;
height: 450px;
background-color: black;
}
.special-con {
cursor: pointer;
display: inline-block;
}
.bar {
display: block;
height: 2px;
width: 20px;
background: #000000;
margin: 5px auto;
}
.col {
display: inline-block;
width: 24%;
text-align: center;
height: auto;
position: fixed;
}
.bar {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.con:hover .arrow-top-fall {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
.con:hover .arrow-bottom-fall {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
}
.special-con {
margin: 0 auto;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.special-con:hover .arrow-top-fall {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
.arrow-bottom-fall,
.arrow-top-fall {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.special-con:hover .arrow-bottom-fall {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
</style>
<body>
<div class="section">
<div class="col">
<div class="special-con">
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjE0MDYiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">
<div class="bar arrow-top-fall"></div>
<div class="bar arrow-middle-fall"></div>
<div class="bar arrow-bottom-fall"></div>
</a>
</div>
</div>
</div>
<div class="section-black">
</div>
<div class="section">
</div>
<div class="section-black">
</div>
<div class="section">
</div>
<div class="section-black">
</div>
<div class="section">
</div>
</body>
</html>
Thank you very very much!
I hope this code will work for you.
$(window)
.scroll(function () {
var scroll = $(window).scrollTop() + $(window).height() / 3;
$('.panel').each(function () {
var $this = $(this);
if (
$this.position().top <= scroll &&
$this.position().top + $this.height() > scroll
) {
$('body').removeClass(function (index, css) {
return (css.match(/(^|\s)color-\S+/g) || []).join(' ');
});
$('body').addClass('color-' + $(this).data('color'));
}
});
})
.scroll();
body {
color: #000;
background-color: #ffffff;
transition: all 0.4s linear;
text-align: center;
font-size: 120%;
line-height: 1.618;
}
.panel {
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
font-family: sans-serif;
position: relative;
}
.color-black .hamburger {
color: #fff;
}
.hamburger {
position: fixed;
top: 10px;
left: 10px;
color: #000;
}
.color-black {
background-color: #000000;
color: #fff;
}
h1 {
font-size: 4em;
line-height: 140%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel" data-color="white">
<div>
<h1>Hamburger Color Change</h1>
<a class="hamburger" href="javascript:void(0)">Hamburger</a>
</div>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 01</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 01</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 02</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 02</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 03</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 03</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 04</h2>
</div>
You can use Intersection Observer API and some others library..
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Or
Way Points Library
https://github.com/imakewebthings/waypoints
I hope, it's useful for u

rotate logo after entering a new section

I'm a newbie and I'm using fullpage.js for the first time. I hope you can help me.
So my goal is to rotate my logo by 60deg each time I enter a new section. I have 5 sections.
I've been trying some stuff but its not what i desired. Right now I use this.
But it only applies to the section0, section1 and resets at section3.
Why isnt it working?
$(document).ready(function(){
$('#fullpage').fullpage({
//options
sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
easingcss: 'cubic-bezier(.31,.87,.89,.48)',
loopTop: true,
loopBottom: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchor, index) {
$('#logo').toggleClass('rotate1');
},
onLeave: function(index, nextIndex, direction) {
$('#logo').toggleClass('rotate2');
}
});
});
#logo {
position: fixed;
width:80px;
height:80px;
top: 20px;
left: 20px;
z-index: 100;
}
#logo.rotate1 {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#logo.rotate2 {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="assets/css/fullpage.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<script type="text/javascript">
</script>
</head>
<body>
<img id="logo" src="assets/img/logo.svg">
<div id="fullpage">
<div class="section"><h3>Section</h3>1</div>
<div class="section"><h3>Section</h3>2</div>
<div class="section"><h3>Section</h3>3</div>
<div class="section"><h3>Section</h3>4</div>
<div class="section"><h3>Section</h3>5</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/fullpage.min.js" type="text/javascript"></script>
<script src="assets/js/function.js" type="text/javascript"></script>
</body>
</html>
Using jquery data() and css() method
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
easingcss: 'cubic-bezier(.31,.87,.89,.48)',
loopTop: true,
loopBottom: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchor, index) {
let angle = +$('#logo').data('angle') + 60;
$('#logo')
.css({'transform': `rotate(${angle}deg)`})
.data('angle', angle);
}
});
});
#logo {
position: fixed;
width: 80px;
height: 80px;
top: 20px;
left: 20px;
z-index: 100;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.as-console {
display: none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.css" />
<img id="logo" src="https://via.placeholder.com/80" data-angle="-60">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.js"></script>
<div id="fullpage">
<div class="section">
<h3>Section</h3>1</div>
<div class="section">
<h3>Section</h3>2</div>
<div class="section">
<h3>Section</h3>3</div>
<div class="section">
<h3>Section</h3>4</div>
<div class="section">
<h3>Section</h3>5</div>
</div>

How Can I Make A Slide-Out Using Javascript?

I want to create a slide out which slides out automatically on page load, stays for 5 seconds and then slides in and show a button which slide it out again when clicked or hovered.
I've prepared a little fiddle that I think does what you're looking for.
<style>
#popup {
width:300px;
height:300px;
top:50%;
margin-top:-150px;
background: grey;
position:absolute;
left: -300px;
-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
}
#popup.active {
left:0;
}
button {
float:right;
}
</style>
<div id="popup">
<button id="close">Close</button>
</div>
<script>
setTimeout(function() {
document.getElementById('popup').className="active";
}, 5000);
document.getElementById('close').onclick=function () {
document.getElementById('popup').className="";
}
</script>

transition of image to another image on hover

I want transition of image to another image when hover. But after using the following code the size of the image is more than the page and when hover the image disappears and no other image can be seen.
HTML
<html>
<head>
<title></title>
</head>
<body>
<div id="cssfade">
<img src="image1.jpg" height:200px;width:300px;/>
</div>
</body>
</html>
CSS
#cssfade {
background-image: url('image2.jpg');
height:200px;
width: 300px;
}
#cssfade img {
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#cssfade img:hover {
opacity:0;
}
I'm assuming the image in the div is content so I have left it there and merely moved the hover to take effect when the wrapping div is hovered.
#cssfade {
width: 300px;
height: 200px;
background-image: url(http://lorempixel.com/300/200/sports/2/);
}
#cssfade img {
width: 300px;
height: 200px;
display: block;
transition: opacity 1s ease;
}
#cssfade:hover img {
opacity: 0;
}
<div id="cssfade">
<img src="http://lorempixel.com/300/200/sports/1/" alt="">
</div>
EDIT - Just to clarify the difference to Tushar's answer, the transitions should be on #cssfade rather than #cssfade:hover to ensure the transition applies when hovering and un-hovering.
HTML:
<html>
<head>
<title>...</title>
</head>
<body>
<div id="cssfade"></div>
</body>
</html>
CSS:
#cssfade {
height:200px;
width: 300px;
background-image: url('image1.jpg') no-repeat;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#cssfade:hover {
background-image: url('image2.jpg') no-repeat;
}
Use background-image on div.
On hover change the background-image.
Transition:
MDN
CSS Tricks
Demo
#cssfade {
background-image: url('http://lorempixel.com/400/200');
height: 200px;
width: 300px;
}
#cssfade:hover {
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
background-image: url('http://lorempixel.com/400/200/sports/1');
}
<div id="cssfade"></div>

Jquery Slide Animation on hover

I am trying to implement a Jquery Hover function on my Company Logo. I want to achieve this :
However, I had achieved THIS
I used the following logic :
$(".m1").hover(function() {
dir = !dir;
r = dir? -50 : 0;
t = dir? 50 : 0;
$(".slide").stop().animate({left: r+'px'}, 300);
});
You can check my JS Fiddle here : http://jsfiddle.net/Jiteen/xZ6Hv/
Any sort of Help or Suggestion is Appreciated.
How about the below as a starting point? No need for JS!
Demo Fiddle
HTML
<div>
<div href="#" class="word" data-text="edia">M</div>
<div href="#" class="word" data-text="antra">M</div>
</div>
CSS
.word {
display:inline-block;
font-size:1em;
line-height:1;
position:relative;
font-size:50px;
}
.word:first-child {
color:orange;
}
.word:last-child {
color:grey;
}
.word:after {
content:attr(text);
position:relative;
display:inline-block;
overflow:hidden;
max-width:0;
color:black;
font-size:20px;
transition:max-width .5s ease-in;
}
div:hover .word:after {
max-width:40px;
}
You can achieve this by using a structure like this:
<div class="logo">
<div class="m1">M</div>
<div class="m3">aaa</div>
<div class="m2">M</div>
<div class="m4">aaa</div>
</div>
And animate it by changing the width of .m3 and .m4
jsFiddle
This is what i would do: http://jsfiddle.net/A6vYy/.
Do note though, that if you're using images instead of divs you can skip some of the CSS.
JS
$(document).ready(function () {
$(".logo").on("mouseenter", function () {
$(this).find(".hidden").animate({width: "50px"});
}).on("mouseleave", function () {
$(this).find(".hidden").animate({width: "0px"});
});
});
HTML
<div class="logo">
<div class="part">M</div><div class="hidden">edia</div><div class="part">M</div><div class="hidden">antra</div>
</div>
CSS
.part, .hidden {
width: 50px;
height: 50px;
background: red;
display: inline-block;
font-size: 24px;
text-align: center;
vertical-align: top;
}
.hidden {
width: 0px;
overflow: hidden;
}
Try this out :
<div class="media">
<span class="big">M</span>edia
</div>
<div class="mantra">
<span class="big">M</span>antra
</div>
Css:
.media,.mantra{
width:28px;
overflow: hidden;
float:left;
margin-left:2px;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
cursor: pointer;
}
.media:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.mantra:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
}
.big{
font-size: 2em;
color: #ff8800;
}
Working Demo :http://jsfiddle.net/Jiteen/xZ6Hv/

Categories