Create div transition like Spotify - javascript

I would like to have some help about the transition of a div in CSS or JavaScript.
I have a <div> with dispay:none;.
With some JS, i change the display option on display:block.
All is working correctly.
But i would like to know how to make a transition when the <div> appear on the screen.
Like the player Spotify when you want to search something.
Thanks for you help.
And really sorry for my BAD english !

You can do it with a JQuery like this:
$(function() {
var open=false;
$('.menubar span').click(function(){
if(open==false){
$('.search').css('left','50px');
open=true;
}
else{
$('.search').css('left','-100px');
open=false;
}
});
});
.menu{
position:fixed;
left:0;
top:0;
width:50px;
height:100%;
background:#222021;
z-index:4;
}
.menubar{
width:50px;
height:100%;
color:white;
font-family:arial;
}
.search{
position:absolute;
left:-100px;
top:0;
width:100px;
background:lightgrey;
height:100%;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s ;
-webkit-transition:.3s;
transition:.3s ;
}
.search input{
margin:0;
width:75px;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
<div class="menubar">
<span>Home</span>
</div>
</div> <div class="search"><input type="search"></div>
Click "Menu" in the menu bar, and the search bar slides out, click again to hide it.
To use JQuery, you have to include the jquery library:
include this in <head>:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Or download it from:http://jquery.com/download/
Then, just use the script like normal JS, in a <script> tag.
EDIT:
With your problem in the comments below, #navbar had a static position, which means z-index will not work for it:
#nav-bar {
background-color: #23232C;
bottom: 0px;
left: 0px;
top: 0px;
width: 220px;
height: 100%;
margin-top: -17px;
z-index: 99;
position: absolute;
}

The following answers uses CSS Style Declarations to accomplish the transition effect.
if you declare the transition: all 1s style on an element. If the style property changes on that element your browser's (user-agent's) graphic device will calculate and update the frames (or visual changes) that occur between the two states (initial state, and end state). However, the property that is being changed must be scalar; that is, both the initial value and new value are scalar (like 0% being set to 100%). Additionally, if you're changing a property that is not scalar, but affects the rendering of other properties.. they will skip the transition effect (aka display:none being set to display:block).
Note: Instead of changing the inline style on the elements using Javascript, we're going to instead change the class of those elements; meaning, the following styles represent visual states, which we'll toggle between..
Again, the transition style declaration (or rather, the graphic device) will handle the incremental rendering of the frames between these two states.
Code Sample of changing 4 style properties (explicitly)
var str = 'hide';
var btn = document.querySelector("button#toggler").addEventListener('click', function(ev)
{
var elms = document.querySelectorAll('div.block');
for (var i = 0, lng = elms.length; i < lng; i++)
{
elms[i].className = elms[i].className.replace("hide", "").replace("show", "").replace(" ", "");
elms[i].className = elms[i].className + ' ' + str;
}
str = (str === 'show') ? str = 'hide' : 'show';
});
.block {
display:block; position:absolute;
top:0;
left:0;right:80%;
bottom:0;
background-color: rgba(0,0,0);
border:0.1em solid black;
min-width:5em;
transition: left 2s, opacity 2s, right 2s, background-color 1s;
}
.wrapper
{
display:block;position:relative;background-color:whitesmoke;
min-height:10em;
width:auto;
}
.show {opacity:1;left:0%;right:80%;background-color:rgb(255,0,0);}
.hide {opacity:0;left:80%;right:0%;background-color:rgb(0,0,255);}
<button id="toggler">Toggle Block</button>
<div class="wrapper">
<div class="block"></div>
</div>
The following is a fairly more complex slider, which ulitmately uses the same principal for rendering the transitions.
$("div.slide > button.show" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slidePrev = slide.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
})
$("div.slide > button.hide" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slideNext = slide.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slidePrev.toggleClass("hide").toggleClass("show");
})
html, body {display:block;position:relative;margin:0 auto;padding:0;height:100%}
div.wrapper {position:relative;
left:0;right:0;top:0;bottom:0;
width:auto;
background-color:whitesmoke;
display:block;
overflow:hidden; height:100%;
}
button {line-height:2em;padding:0.2em;display:block;}
div.slide {
display:block;
position:absolute;
border:0.2em solid black;
background-color:white;
top:0;
bottom:0;
right:0;
left:0;
opacity:1;
transition: left 1s, opacity 0.5s;
}
div.slide:nth-child(1) {
left: 1em;
z-index: 1;
}
div.slide:nth-child(2) {
left: 3.5em;
z-index: 2;
}
div.slide:nth-child(3) {
left: 6em;
z-index: 3;
}
div.slide:nth-child(4){
left: 8.5em;
z-index: 4;
}
div.slide.hide {
opacity:0.3;
left: 59%;
}
div.slide.show {
opacity:1;
}
div.show > button.show {display:none;}
div.hide > button.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
</div>

Related

image background change on scroll

i am trying to change background image on scroll, but cant seem to find any guide, so i will try my luck here.
here is a video of exactly what i am trying to achieve - https://www.youtube.com/watch?v=7u1aIxQCIXg
i want to have a background image, and text that goes over when i scroll, and when i come to a certain point, the background image changes/fades over and not scrolls up from the bottom
i have tried some, but does not have the skills at this point
although you didnt provided any progress you made still i enjoyed making it
accept my answer if you find it usefull please check my codepen link
demo
<style>
body {margin: 0;padding: 0;}
.section {
height: 100vh;
width: 100%;
display: flex;
z-index: 1;
position: relative;
background-size: 100% 100% !important;
}
.text {
margin:auto;
font-size: 2.5em;
border:1px solid white;
color:white;
padding:1em;
text-shadow: 2px 2px 3px black,
2px 2px 3px black;
}
.BG {
position: fixed;
z-index: 0;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.anim {opacity:1;}
.show {color:orange;}
</style>
<body>
<div class="main">
<div class="section BG">
<div class="show"></div>
</div>
<div class="section" BGurl="https://i.ibb.co/0DxzSg0/pngtree-blue-carbon-background-with-sport-style-and-golden-light-image-371487.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/31YPsfg/triangles-1430105-340.png"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/Y3BgqMc/7f3e186790208b63dadda09d6b91d334.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/GCQP61b/photo-1513151233558-d860c5398176-ixlib-rb-1-2.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/D9WGPf9/pngtree-modern-double-color-futuristic-neon-background-image-351866.jpg"><div class="text">SECTION</div></div>
</div>
</body>
<script>
function scrollPictureChange(){
var main = document.querySelector(".main"),
sections = main.querySelectorAll(".section"),
BG = main.querySelector(".BG"),
el = document.querySelector(".show"),cords,index=0,h = window.innerHeight,lastIndex=null,offset=0
applyBG(0)
window.addEventListener("scroll",function(){
scrollY = Math.abs(document.body.getClientRects()[0].top)
index = Math.floor(scrollY / (h - offset))
if(index != lastIndex){ // on index change
if(lastIndex != null){
applyBG(index)
}
lastIndex = index
}
el.innerText = `index : ${index} height : ${h} top : ${scrollY}`
})
function applyBG(index){
BG.classList.remove("anim")
setTimeout(function(){
BG.style.backgroundImage = `url(${sections[index + 1].getAttribute("BGurl")})`
BG.classList.add("anim")
},300)
}
}
window.onload = scrollPictureChange
window.onresize = scrollPictureChange
</script>

Images wont move based on changes with vanilla javascript

I am expecting the images to shift to the right. Runner increments and prints 1px, 2px, 3px etc. to console, but new margin wont be set. What's the problem?
Together with the code below, what I have written above should be sufficient to understand my problem. But I am, at this point, simply writing to get rid of the prompt to write more text.
<body>
<div class="normal">
<img id="normal" src="whiteboard.jpeg">
</div>
<div class="scaled">
<img id="scaled" src="whiteboard.jpeg">
</div>
</body>
<style>
.normal{
background-image: url('whiteboard.jpeg');
position:absolute;
z-index:-1;
}
.scaled{
transform:scale(120%);
z-index:2;
clip-path: circle(5% at 33% 42%);
}
.normal, .scaled{
width:100vw;
}
div img{
width:100%;
height:auto;
}
</style>
<script>
window.onload=function(){
const normal = document.getElementById('normal');
const scaled = document.getElementById('scaled');
let runner =0;
setInterval(function(){
normal.style.marginRight="-"+runner+"px";
scaled.style.marginRight="-"+runner+"px";
runner++;
console.log("respons - "+runner+"px")
},50);
}
</script>
The marginRight style describes the distance of the div element to its parent's right side. A negative marginRight will not work here - instead try marginLeft. Depending your desired direction of the animation use a positive or negative value.
window.onload = function() {
const normal = document.getElementById('normal');
const scaled = document.getElementById('scaled');
let runner = 0;
setInterval(function() {
normal.style.marginLeft = "-" +runner + "px";
scaled.style.marginLeft = "-" +runner + "px";
runner++;
console.log("respons - "+runner+"px")
}, 50);
}
<body>
<div class="normal">
<img id="normal" src="whiteboard.jpeg">
</div>
<div class="scaled">
<img id="scaled" src="whiteboard.jpeg">
</div>
</body>
<style>
.normal {
background-image: url('whiteboard.jpeg');
position: absolute;
z-index: -1;
background-color: blue;
}
.scaled{
transform: scale(120%);
z-index:2;
clip-path: circle(5% at 33% 42%);
background-color: red;
}
.normal, .scaled{
width: 100vw;
}
div img {
width: 100%;
height: auto;
}
</style>

Opening a half page when clicking a button

I am trying to open a kind of a new page when clicking on a button. For example, I have some items that vertically and horizontally center in the page. I want it so that when the button is clicked, it will move all my items to the left half of the page and open a new page on the right half page.
This is my example code:
HTML:
<div>text</div>
<div>text</div>
<div>text</div>
<button>
Click me
</button>
CSS:
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
And this is my goal when someone clicks on the button:
Any suggestions?
If you are comfortable using a js framework, this can be done easily using angularJs.
Simply create and angular module, a controller for that module, and some boolean to render the left and right side divs. I called this boolean clicked, code below:
HTML:
<body ng-app="myApp" ng-controller="myCtrl">
<div class="center-box" ng-if="!clicked">
<p>{{Item1}}</p>
<p>{{Item2}}</p>
<p>{{Item3}}</p>
<button ng-click="setClicked()"> Click me </button>
</div>
<div class="r-half" ng-if="clicked">
<div style="text-align:center;">
My new Page here
</div>
</div>
<div class="l-half" ng-if="clicked">
<div style="text-align:center;">
<p>{{Item1}}</p>
<p>{{Item2}}</p>
<p>{{Item3}}</p>
</div>
</div>
</body>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Item1 = "myItem";
$scope.Item2 = "anotherItem";
$scope.Item3 = "aThirdItem";
$scope.clicked = false;
$scope.setClicked = function(){
$scope.clicked = !$scope.clicked;
}
});
CSS:
.center-box {
text-align:center;
height:100%;
width:100%;
}
.r-half {
width:50%;
float:right;
height:100%
}
.l-half {
width:50%;
float:left;
height:100%
}
A link to my Fiddle: https://jsfiddle.net/Jack_Hamby/c06gd2z4/
Here's a simple example that uses iframe elements that loads up your content and external content at the same time:
html, body, #wrapper {height:100%;}
#left {float:left; width: 50%; background-color:yellow; height:100%; padding:0;margin:0;}
#right {float:left; width:49%; background-color:grey; height:100%; padding:0; margin:0;}
<div id="wrapper">
<div id="left">
This is the original content
</div>
<iframe id="right" src="https://example.com">
This is where the new content goes
</iframe>
</div>
And here'a an example that uses AJAX to accomplish what you are asking for. But, you will need to substitute your URL for the "page2" data into this example. This would be useful when you want more control over the fetching and consumption of the external data.
// Get a reference to the "right" container
var right = document.getElementById("right");
// Instantiate a new AJAX component
var xhr = new XMLHttpRequest();
// Set up the component to respond to changes in its state
xhr.addEventListener("readystatechange", function(){
// If the request is complete
if(xhr.readyState === 4){
// If the result was successful
if(xhr.status === 200){
// successful call
// Set the right content area to the returned value of the AJAX call
right.innerHTML = xhr.responseText;
// Change the widths of the div elements so that the right area
// is now shown and the left area shrinks down
left.style.width = "50%";
right.style.width = "50%";
}
}
});
// Configure the AJAX request. You need to supply a URL
// on your server to get the new page data from:
xhr.open("GET", "SomeURL");
// Make the request
xhr.send();
html, body, #wrapper {height:100%;}
/*
In reality, change the left width to 100% and the right width to 0 here
The JavaScript will modify the values to 50/50. I've only set the values
to 50/50 to show how the results will look
*/
#left {float:left; width: 50%; background-color:yellow; height:100%; padding:0;margin:0;}
#right {float:left; width:50%; background-color:grey; height:100%; padding:0; margin:0;}
<div id="wrapper">
<div id="left">
This is the original content
</div>
<div id="right">
This is where the new content goes
</div>
</div>
Lose the body tag in the css.
Instead, create 2 <div> elements in your body.
Use the float css attribute to set them side by side:
.div1 {
height:400px;
width:50%;
float:left;
}
.div2 {
height:400px;
width:50%;
float:right;
display:none;
}
After that, when clicking your button, display div2.
In your HTML:
<body>
<div class='div1'>content 1</div>
<div class='div2'>content 2</div>
</body>
Please check this if it help you. then give me a feedback if it needs to improve or not?
$('#button').click(function(){
$('.new-content').toggleClass('half').delay(600).fadeIn(100);
$('.content-container').toggleClass('half');
});
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
.content-container {
height: 100vh;
display: block;
background: #ddd;
float: left;
width: 100%;
position: relative;
}
.new-content {
display: none;
float: left;
width: 0;
height: 100vh;
background: #f60;
}
.new-content.half,
.content-container.half {
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
<div class="content">
<div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
</div>
</div>
<div class="new-content">
</div>

Collapsing hide/show elements problems

So, here is my problem: This code doesn't work here, but it does here: http://jsfiddle.net/e6kaV/33/ (I mean after click animations) I would also like to add some text below 80*80 example images, which would move with panel (where I have written Model1 and Model2) after I click to show them. Where am I doing mistake, and how can I put text that would move ? I am sorry for my english and for not knowing all the Javascript things, but I would appreciate some help, thanks.
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'up' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});
.pane-launcher{
position:absolute;
top: 0;
width:80px;
height:80px;
display:block;
}
#rules {
left:0px;
}
#scenarios {
left:90px;
}
.pane{
position:absolute;
left: 0;
height:50px;
display:none;
opacity:1;
}
#rules-pane {
top:80px;
width:170px;
background-color:yellow;
}
#scenarios-pane {
top:80px;
width:170px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>
<div>
<p>
TEXT BELOW
</p>
</div>

How to make vertical "slide" scroll?

I have a landing page, consisting of three frames, this frames always take 100% of viewport height and width.
I need to make transitions between frames, like "powerpoint presentation" etc. User scroll's, frame-1 slides up above viewport and frame-2 becomes in his place from bottom of viewport. I have almost zero experience in javascript/jquery. Have some ideas, that you can see in the code, but this ideas not works.
HTML:
<div class="wrapper" id="wrapper">
<div class="frame frame-1">
<!-- Content here -->
</div>
<div class="frame frame-2">
<!-- Content here -->
</div>
<div class="frame frame-3">
<!-- Content here -->
</div>
</div>
CSS:
.wrapper {
height: 300vh;
}
.frame {
position: fixed;
height: 100vh;
transition: all 1s ease;
}
.frame-1 {
top: 0vh;
}
.frame-2 {
top: 100vh;
}
.frame-3 {
top: 200vh;
}
JS:
var $document = $(document),
$element1 = $('.frame-1'),
$element2 = $('.frame-2'),
$element3 = $('.frame-3');
$(window).scroll(function () {
if ($(this).scrollTop() >= 50) {
$element1.css("top", "-100vh");
$element2.css("top", "0vh");
$element3.css("top", "100vh");
} else if ($(this).scrollTop() >= 100) {
$element1.css("top", "-200vh");
$element2.css("top", "-100vh");
$element3.css("top", "0vh");
} else {
$element1.css("top", "0vh");
$element2.css("top", "100vh");
$element3.css("top", "200vh");
}
});
If you have a set number of frames, I would suggest placing them all in a single div, and changing the top value of that. that way, only one value need be modified.
Like this: http://jsfiddle.net/xkh4D/10/
(Note that, though px are used, vh or whichever other unit should work just as well... haven't tried %, though...)
HTML
<div id='yo' class='view'>
<div>
<div class='frame red'></div>
<div class='frame green'></div>
<div class='frame blue'></div>
</div>
</div>
<input type='button' value='Scroll' onclick='scrollFrame()'/>
CSS
.view {
position:relative;
width:300px;
height:250px;
border:1px solid black;
overflow:hidden;
}
.view > div {
position:absolute;
width:inherit;
height:inherit;
top:0px;
}
.frame {
width:inherit;
height:inherit;
}
.red { background-color:#faa }
.green { background-color:#afa }
.blue { background-color:#aaf }
JavaScript
scrollFrame = function()
{
var h = $('#yo').height();
var y = parseFloat($('.view > div').css('top'));
var hsum = $('.view .frame').length * h;
console.log('h,y,hsum',h,y,hsum);
if (hsum-h == -1*y)
$('.view > div').animate({'top':0});
else
$('.view > div').animate({top:y-h},500);
}
This js could be your solution
http://alvarotrigo.com/fullPage/

Categories