I want to use this functionality in my website (when press in 'SHOW IT') --> http://labs.voronianski.com/jquery.avgrund.js/
The problem is that this functionality need to put body height to 100%. In some time, in me site I need to detect the scroll user to make topbar appear and disappear em some positions.
So to can join this two functionality's, I only change body height to 100% when I press button to show the div avground. But where I have a problem: the button is on page footer and when I change body height, they automatically send me to the top of page and after show de div avground.
Is any way to this don't happen or is possible to scroll to footer before the div avground appear?
If someone have another solution, I appreciate.
Thanks
Have you tried using bootstrap's modals? They are very simple to make and look nicer in my opinion.
http://getbootstrap.com/javascript/
You don't actually have to do that, for that animation you can use simple CSS3:
CSS:
#layer-body {
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#layer-body.hide {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
#menu {
background: rgba(208, 31, 60, .95);
position: fixed; top: 0; left: 0; z-index: 4;
width: 100%; height: 100%;
}
#menu.show {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#menu.hide {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
transition: transform 0.5s, visibility 0s 0.5s;
}
HTML:
<body>
<div id="layer-body"></div>
<div id="menu"></div>
</body>
This means, all of your website will be inside #layer-body, and the menu inside #menu.
So when you open the menu you'll have to add the class HIDE to the #layer-body and SHOW to the #menu.
Related
I have a graphic in XD that animated on hover. I want to implement it on my website.
This is similar to this screen capture here
I tried it using CSS transition but not working. Is there anyone who can help me to do this? My Code is below.
<div class="graphic"></div>
<style>
.graphic{
width: 500px;
height: 500px;
background-image: url(images/Illustration-Idle.svg);
background-repeat: no-repeat;
transition: background-image 5s ease-in-out;
}
.graphic:hover{
background-image: url(images/Illustration-Hover.svg);
}
</style>
You need to apply class or Id to bull and arrow 'path' of svg. Then use transition on them. I would recommend put your SVG in div directly.
.bull{
transition: all 1s ease-in-out;
}
svg:hover .bull{
transform: translate(-50px, 50px);
}
.arrow{
opacity:0;
transition: all 1s ease-in-out;
}
svg:hover .arrow{
opacity: 1;
transform: translate(50px,0);
}
I'm creating a slider element of 2 items only. I want them to smoothly slide back and forth to the left and right when I click back / next. It works well when I click next, elements scroll and fade, but when I click back, the first element jumps ahead in time no matter what I do, this gif explains a bit more visually:
Edit: Here is a fiddle - http://jsfiddle.net/eywraw8t/273583/
This is my css:
.first-slide-enter{
opacity: 0;
transform: translatex(-100%);
transition: all 1.5s ease-out;
}
.first-slide-enter-to{
opacity: 1;
transform: translatex(0);
transition: all 1.5s ease-out;
}
.first-slide-leave-to{
opacity: 0;
transform: translatex(-100%);
transition: all 1.5s ease-out;
}
.second-slide-enter{
opacity: 0;
transform: translatex(0);
transition: all 1.5s ease-out;
}
.second-slide-enter-to{
opacity: 1;
transform: translatex(-100%);
transition: all 1.5s ease-out;
}
.second-slide-leave-to{
opacity: 0;
transform: translatex(0);
transition: all 1.5s ease-out;
}
This is my html:
<transition name="first-slide">
<div v-if="!newShortcut.link">
<div id="drop-shortcut" class="drag-file clickable" #click="addShortcut">
<i class="fas fa-file-upload fa-lg"></i>
<p style="margin:20px 0 0;">Drag file here
<br> or click to browse</p>
</div>
<div>
<button #click="newShortcut.link = !newShortcut.link">Next</button>
</div>
</div>
</transition>
<transition name="second-slide">
<div v-if="newShortcut.link">
<div id="drop-icon" class="drag-file" #click="">
<i class="far fa-file-image fa-lg"></i>
<p style="margin:20px 0 0;">Drag file here
<br> or click to browse</p>
</div>
<div>
<button #click="newShortcut.link = !newShortcut.link">back</button>
</div>
</div>
</transition>
How to make this work?
So #Julian is correct for the blocking issue, but there is another way to fix it that might work for you better. See this fiddle : http://jsfiddle.net/xcmn76Lo/
Basically what was needed was some tweaking to the second slide. There is a hook you can use similar to enter to specify where it starts leaving from. In this case since the other div reserves its space immediately, you need to start the leave transition offsetting appropriately.
.second-slide-leave{
transform:translatex(-100%);
}
Then instead of transition to 100%, set leave-to to 0 (aka where it WOULD end up if moved over by the incoming div).
.second-slide-leave-to{
opacity: 0;
transform: translatex(0);
transition: all 1.5s ease-out;
}
The issue was because of how your elements are displayed. Each slide is a block, so it occupies a space in your layout.
So when you were at the second slide and click the back button.
What happens before that is, there was no slide 1 in the layout and when vue starts to insert the slide 1 back, it occupies a space which causes the second slide to suddenly jump from left to right.
So to fix that behavior, you can make each slide's position as absolute so that if they are inserted back, they will not cause such behavior because absolute position will not affect it's neighboring element's position unlike the relative position.
#app>div {
position: absolute;
height: 200px;
width: 200px;
text-align: center;
left: 0;
top: 0;
}
and update the css transition for the second slide a little bit:
.second-slide-enter {
opacity: 0;
transform: translatex(100%);
transition: all 1.5s ease-out;
}
.second-slide-enter-to {
opacity: 1;
transform: translatex(0);
transition: all 1.5s ease-out;
}
.second-slide-leave-to {
opacity: 0;
transform: translatex(100%);
transition: all 1.5s ease-out;
}
Here's the full JS Fiddle: http://jsfiddle.net/eywraw8t/273631/
I have written this function that binds to a button, which when clicked toggles the class to provide a dropdown. The only problem is is that I have multiple buttons on the same page that have the same functionality, and they all fire when one is clicked:
Any and all help greatly appricated :)
app.bind.DirectionDropdown = function(){
$('.direction-button').bind('click', function(){
$('.direction-dropdown').toggleClass('active');
});
};
.fade-in {
visibility: hidden;
opacity: 0;
transition: visibility 0s,opacity .3s ease-in-out,all .3s ease-in-out;
-webkit-transition: visibility 0s,opacity .3s ease-in-out,all .3s ease-in-out;
-ms-transition: visibility 0s,opacity .3s ease-in-out,all .3s ease-in-out;
-moz-transition: visibility 0s,opacity .3s ease-in-out,all .3s ease-in-out;
}
.active {
visibility: visible;
opacity: 1;
transform: translate(0,0);
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
}
Click to reveal text
<div class="direction-dropdown fade-in">
<p>Reveal this</p>
</div>
Click to reveal text
<div class="direction-dropdown fade-in">
<p>Reveal this</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
You have to use the this keyword, and target only the .direction-dropdown following the .direction-button
$('.direction-button').on('click', function(){
$(this).next('.direction-dropdown').toggleClass('active');
});
In your callback you need to use this instead of .direction-button:
$('.direction-button').bind('click', function(){
$(this).toggleClass('active');
});
$(".direction-button") makes JQuery search in the entire DOM object
I am trying to get an effect which is to zoom in on a logo centred on the page when the page is loaded. I am using the following HTML and JS code:
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<img id="logo" src="images/logo2.png" style="zoom: 200%; transition: zoom 1s ease-in-out;"/>
</div>
JS
document.addEventListener("load", pageFullyLoaded, true);
function pageFullyLoaded()
{
var elem = document.getElementById("logo");
elem.style.zoom = "300%";
}
The result is really odd.
It display the logo in it's normal size,
then it jumps on a super zoomed in version of the logo (> 1000%),
zoom in on the logo even more (1000% to 1500% say) for the duration of the transition,
jump back to the normal logo size and position (which is correct, and this is the final positon and size I want).
So obviously this technique doesn't work:
the jump at the beginning is ugly but I only suppose this happens because 2) is incorrect anyway. As it should start by default with a zoom value of 200% (which is defined in the style of the div) and then the JS should make it zoom to 300%. So there should be no jump visible really.
I don't understand why I get this incredibly zoomed in version of the logo at the start of the animation. Basically it's almost like if the entire image was filling up the screen.
Any idea on how to do this reliably, please? Thank you.
I would do this in only CSS like so:
Set the image to scaleX and scaleY 0 (or hide it in some other way)
On $(window).load or $('document').ready add a class with keyframe animations
Do whatever you need afterwards.
Fiddle
$(window).load(function(){
$('img.zoom').addClass('element-animation');
});
You can also listen to animation end events like so https://github.com/daneden/animate.css#usage
That library (Animate.css) is also pretty handy and you might be able to find some useful effects in it.
If you're looking to scale an image, you don't need to use zoom or transform or anything. Just alter the width directly and the browser will scale the image for you:
http://jsfiddle.net/C4JZv/
HTML:
<div class="wrapper">
<img class="tiny" src="http://placehold.it/200x150" />
</div>
CSS:
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: width 1s ease-in-out;
width: 200px;
}
.wrapper img.tiny {
width: 10px;
}
JS:
document.querySelector('.wrapper img').className = "";
EDIT: You mentioned in the comments that you wanted to see this done using transform. Again, it's just a case of having a shrunken image (using transform's scale), having a transition property and then removing the CSS class that shrinks the image:
http://jsfiddle.net/C4JZv/1/
HTML & JS: Same
CSS: Mostly the same, but with a couple of changes (plus a load of vendor prefixes):
.wrapper img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-ms-transition: -ms-transform 1s ease-out;
-o-transition: -o-transform 1s ease-out;
transition: transform 1s ease-out;
}
.wrapper img.tiny {
-moz-transform: scale(0.1);
-webkit-transform: scale(0.1);
-o-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}
i've got an image that i want to onclick animate the rotation 90degress, when its clicked again i want it to animate the rotation -90degrees.
For the rotation im using the css3 transform:
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
For the jquery I want to set a varable to check if the object has been rotated, then act accordingly.
I have been having a real difficult time trying to get it to work. I've put together a JsFiddle.
This is the code I am using:
var turn = true;
$("#button").click(function () {
$("#shape").css('transform', function(index) {
return index * 90;
});
});
Add some transitions and a rotate class, and just toggle that class:
css:
#shape { width: 100px;
height: 200px;
background:#000;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate {-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
js:
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});
FIDDLE
If I understood correct, THIS should do it.
I think in general, if you're going to use transition's you should target the specific properties you want to affect. I would consider the use of "all" to be poor practice.
Target alternative:
css:
#shape {
width: 100px;
height: 200px;
background:#000;
-moz-transition: transform 1s ease;
-webkit-transition: transform 1s ease;
-o-transition: transform 1s ease;
transition: transform 1s ease;
}
.rotate {
-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
///jquery
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});