CSS making a :active toggled - javascript

i am trying to create a web presentation and wanted to a add a little Animation of 2 Halfes which moves up and down on a Click (which works so far) but i also want them to stay there after the click.
standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg
0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg
after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg
This is my Code for that: HTML
<body>
<a href="#" id="btn_logo" onclick="return false"> <div id="animation">
<div id="logo"> </div>
<div id="up"> </div>
<div id="down"> </div>
</div></a>
and then made the animation with:
#btn_logo:active #up
and
#btn_logo:active #down
How could i make the animation toggled after it ended?


What you should do is have it animate on a CSS class, and then simply add or remove a CSS class on click.
Like so: https://jsfiddle.net/8troo8bw/1/
(or so with your exact html): https://jsfiddle.net/8troo8bw/2/
The key here being the animation:
#up, #down {
background: #000;
position:absolute;
right:0;
left:0;
width:100%;
height:25px;
transition: top 0.25s;
}
#up.moveUp {
top: 25px;
}
#down.moveDown {
top: 100px;
}
And the relevent JS to add the class:
$('#click').on('click', function(){
$('#up').addClass('moveUp');
$('#down').addClass('moveDown');
});


Do something like this:
$(document).ready(function(){
$('#animation').on('click', function() {
$('.up,.down').addClass('animated');
});
});
#animation {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: yellow;
}
.logo {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
background: red;
border-radius: 50%;
margin: 0 auto;
}
.up {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
background: green;
}
.down {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.up.animated {
bottom: 100%;
top: -50%;
transition: all 1s linear;
}
.down.animated {
top: 100%;
bottom: -50%;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="animation">
<div class="up"> </div>
<div class="down"> </div>
<div class="logo"> </div>
</div>

Related

How to loads the page preloader when user click on nav item

In my web project, I have used a preloader to load when a page loads.
But I want to load it whenever the user clicks the nav item, if the item clicks show the preloader, and then when the result loads, hide the preloader.
Currently, the preloader works when the nav item clicks and when the requested page started to load.
I would like to know how to load it when as soon as the nav item is clicked.
This is my current code.
<style>
.loader-bg {
position: fixed;
z-index: 999999;
background: #fff;
width: 100%;
height: 100%;
}
.loader {
border: 0 solid transparent;
border-radius: 50%;
width: 150px;
height: 150px;
position: absolute;
top: calc(50vh - 75px);
left: calc(50vw - 75px);
}
.loader:before, .loader:after {
content: '';
border: 1em solid #ff5733;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s liner infinite;
opacity: 0;
}
.loader:before {
animation-delay: .5s;
}
#keyframes loader{
0%{
transform:scale(0);
opacity:0;
}
50%{
opacity:1;
}
100%{
transform:scale(1);
opacity:0;
}
}
</style>
<div class="loader-bg">
<div class="loader" id="spinner">
<img src="~/Th/01.png" class="mr-2" alt="logo" width="100px" height="auto" class="center" />
<i class="spinner-border text-secondary"></i>
<label> Please wait...</label>
</div>
</div>
<script>
setTimeout(function () {
$('.loader-bg').fadeToggle();
},
10);
</script>

How can i achieve the animation shown in this video link?

I wanted to achieve animation as shown in this video link.
https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH
I am new to web development. Can anyone give me some idea to achieve it?
Thanks

Just mouse hover on my example to have a snippet to start over, mate:
div {
display: inline-block;
}
div.line-container, div.circle {
float:left;
}
div.line-container {
height: 50px;
width: 50px;
position: relative;
}
div.circle {
background-color: green;
border-radius: 50%;
width: 50px;
height: 50px;
}
div.line {
background: #999;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
}
div.line2 {
background: red;
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
transition: all 1s;
z-index: 5;
}
div.container:hover div.line2 {
right: 0;
}
<div class="container">
<div class="circle"></div>
<div class="line-container">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="circle" />
</div>

Only one out of five divs transitions correctly

After clicking the button the elements should move to their second positions. It only seems to work with the last element where I used !important which I don't want to use. Here is my code:
let ruch = document.querySelectorAll('.menu');
let myArray = Array.from(ruch);
let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
myArray.forEach(function (item) {
if (item == myArray[0]) {
item.classList.add('run1');
} else if (item == myArray [4]) {
item.classList.add('run2');
} else {
item.classList.add('run');
}
});
});
body {
background-color: #302e2e;
font-size:22px;
}
#btn{
position: absolute;
left: 914px;
top: 180px;
}
.wrapper{
position: relative;
width:600px;
margin: 0 auto;
}
.container{
position:absolute;
top:250px;
width:0px;
}
.menu{
padding:5px;
border:1px solid #323232;
width:100px;
height:100px;
background:#46f4a0;
border-radius:20px;
position: absolute;
box-sizing: border-box;
}
.menu:nth-child(2){
left:105px;
}
.menu:nth-child(3){
left:210px;
}
.menu:nth-child(4){
left:315px;
}
.menu:nth-child(5){
left:420px;
}
.run{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
top:110px;
}
.run1{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
left:-110px;
}
.run2{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
left:530px!important;
}
<button id="btn">
Kliknij
</button>
<div class="wrapper">
<div class="container ">
<div class="menu ">About</div>
<div class="menu ">My Projets</div>
<div class="menu ">Some stuff</div>
<div class="menu ">Werid shits</div>
<div class="menu ">Contact</div>
</div>
</div>
Thanks for your help

Like this? (complementary CodePen)
let menuItems = Array.from(document.querySelectorAll(".menu"));
document.getElementById("btn").addEventListener("click", function() {
menuItems[0].classList.add("run1");
menuItems[4].classList.add("run2");
menuItems.slice(1, 4).forEach(function(item) {
item.classList.add("run");
});
});
body {
background-color: #302e2e;
font-size: 22px;
}
#btn {
position: absolute;
left: 914px;
top: 180px;
}
.wrapper {
position: relative;
width: 600px;
margin: 0 auto;
}
.container {
position: absolute;
top: 250px;
width: 0px;
}
.menu {
padding: 5px;
border: 1px solid #323232;
width: 100px;
height: 100px;
background: #46f4a0;
border-radius: 20px;
position: absolute;
box-sizing: border-box;
}
.menu:nth-child(2) {
left: 105px;
}
.menu:nth-child(3) {
left: 210px;
}
.menu:nth-child(4) {
left: 315px;
}
.menu:nth-child(5) {
left: 420px;
}
.menu.run {
opacity: 0;
transition: 3s ease-in-out;
transform: translateY(110px);
}
.menu.run1 {
opacity: 0;
transition: 3s ease-in-out;
transform: translateX(-110px);
}
.menu.run2 {
opacity: 0;
transition: 3s ease-in-out;
transform: translateX(110px);
}
<button id="btn">Kliknij</button>
<div class="wrapper">
<div class="container">
<div class="menu">About</div>
<div class="menu">My Projets</div>
<div class="menu">Some stuff</div>
<div class="menu">Werid shits</div>
<div class="menu">Contact</div>
</div>
</div>
Please also look into your CSS again. You should avoid working with absolute positioning and pixel values only since it will look different on every device.

U need to move transition to '.menu' and it should look like that:transition:3s transform ease-in-out;. And in '.run', '.run1', '.run2' when left replace with: transform: translateX(/*value*/px);. And when top replace with: transform: translateY(/*value*/px);.

How do I slide up a div off container with moving effect in jquery?

This is my fiddle:
https://jsfiddle.net/XiangXu/rf6tdw4s/17/
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
<div class="innerTop" id="top">Slide from top</div>
<div class="innerBottom" id="bottom">Slide from bottom</div>
</div>
.slide {
position: relative;
height: 100px;
background-color: yellow;
}
.slide .innerTop {
position: absolute;
top: 0px;
}
.slide .innerBottom {
position: absolute;
bottom: 0px;
}
$("#slide").click(function() {
$("#top").slideToggle();
$("#bottom").slideToggle();
});
The bottom one is no problem which moves down off the container.
But the top one is like there is something erasing it from bottom to top instead of moving it!
How do I move it off the container like the bottom one?

You can't do it with jQuery's .slideUp() and .slideDown() function because it animates height of the element. However you can add class on click and use css transform for styling them.
$("#slide").click(function() {
$("#top, #bottom").toggleClass('hidden');
});
.slide {
position: relative;
height: 100px;
background-color: yellow;
overflow: hidden;
}
.slide .innerTop,
.slide .innerBottom {
transition: transform 0.25s linear;
transform: translateY(0);
}
.slide .innerTop {
position: absolute;
top: 0px;
}
.slide .innerTop.hidden {
transform: translateY(-100%);
}
.slide .innerBottom {
position: absolute;
bottom: 0px;
}
.slide .innerBottom.hidden {
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
<div class="innerTop" id="top">Slide from top</div>
<div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

You can do it with toggling a css class.
Add a class hidden when want to hide it
set position of the elements out of the box making it negative
set overflow:hidden of the container.
Here is a working example:
$("#slide").click(function() {
$("#top, #bottom").toggleClass("hidden"); // toggle CSS class on click
});
.slide {
position: relative;
overflow: hidden; /* setting overflow hidden */
height: 100px;
background-color: yellow;
}
.slide .innerTop {
position: absolute;
top: 0px;
}
.slide .innerBottom {
position: absolute;
bottom: 0px;
}
#top,
#bottom {
transition: 0.25s linear; /* adding animation */
}
#top.hidden {
top: -30px; /* making out of the visible area */
}
#bottom.hidden {
bottom: -30px; /* making out of the visible area */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
<div class="innerTop" id="top">Slide from top</div>
<div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

Here is working example,
$("#slide").click(function() {
$("#top").slideToggle();
$("#bottom").slideToggle();
});
$("#slideDown").click(function() {
$("#top").slideDown();
$("#bottom").slideDown();
});
$("#slideUp").click(function() {
$("#top").slideUp();
$("#bottom").slideUp();
});
.slide {
position: relative;
height: 100px;
background-color: skyblue;
}
.slide .innerTop {
position: absolute;
top: 0px;
padding: 8px;
background-color: #acacac;
}
.slide .innerBottom {
position: absolute;
bottom: 0px;
padding: 8px;
background-color: #acacac;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script><button id="slide">slide it</button>
<button id="slideDown">slide Down</button>
<button id="slideUp">slide Up</button>
<div id="slidebottom" class="slide">
<div class="innerTop" id="top">Slide from top</div>
<div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

making a toggle button to change panels

I have two panels at the top of my application and one button at the button. By default only panel one must be visible, but by clicking on the button panel one fades away, and panel two fades in. I created the layout, but I do not know how to achieve it.
$(".panel2").hide();
$(document).ready(function() {
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>
First of all since I did $('.panel2').hide();, in page load first it loads the panel then hides it. How can I make it invisible from the beginning?
Secondly how can I make the panel2 visible only by pressing the button?
And finally is there anyway to add some transitions effects for changing panels?

You may try:
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
While for the visibility you need:
<div class="panel2" style="display: none;">Panel2</div&gt
The running snippet:
$(function () {
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2" style="display: none;">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>

To make one of the panels hidden in the first place, I'd use a css class called hidden:
.hidden{
display : none;
}
Which simply makes what it sounds like, hiding the element.
Than, I'd set this class in the HTML decleration:
<div class="panel2 hidden">Panel2</div>
That will hide panel2 on page load, and by that you don't have to hide it using js code.
Than, I'd use a helper css class called panel that stands to be a panel identifier (you can either use the data attribute, or any other way of identifying those elements).
For 5 panels, it would look like this:
<div class="panel panel1">Panel1</div>
<div class="panel panel2 hidden">Panel2</div>
<div class="panel panel3 hidden">Panel3</div>
<div class="panel panel4 hidden">Panel4</div>
<div class="panel panel5 hidden">Pane5</div>
At last, to make this work for any number of panels you want (not necesseraly 2), I'd use a "carousel" effect to toggle the panels visibility, while having a way to keep track with them (adding and removing the hidden class), and use the fadeIn/fadeOut effect. (again, instead of identifying the panels using the panel1,panel2,panel3... classes, you can always use the data attribute (please read more about it in jQuery docs), or in any other way).
var currentPanel = 1;
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
$(".panel"+currentPanel).fadeOut("normal", function(){
$(this).addClass('hidden');
});
currentPanel = currentPanel >= $(".panel").length ? 1 : currentPanel+1;
$(".panel"+currentPanel).fadeIn().removeClass('hidden');
});
Just note that the hidden class actually "looses" it's functionality after the first click, since jQuery changes the display property inline, but I think that it might not be harmful to keep them anyway (it will be easier to track them).
You can see an example here: https://jsfiddle.net/j79y5kdb/3/

Categories

Resources