how will i add the flip animation to a button. The + button on the frontside instead of flipping on hover could be a start.
https://bootsnipp.com/snippets/92xNm
i understand that the animation comes from the
.image-flip:hover .backside,
.image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
border-radius: .25rem;
}
.image-flip:hover .frontside,
.image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
but how could i add this to a click event instead?
im using C# blazor if it changes anything.
Can't you use :active?
I think the better way is to use JS onclick and add/remove class to it.
Ok folks, I really need some help here, it's blowing my mind...
Please take a look at the following example:
https://jsfiddle.net/t0Lahyjy/
HTML:
<div id="exmpl"></div>
<button id="btn">Try it</button>
CSS:
#exmpl {
margin: 100px auto 0 auto;
height: 100px;
width: 10px;
background: #000;
-webkit-animation: anim 3s infinite linear;
animation: anim 3s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
#-webkit-keyframes anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#btn {
margin: 100px auto 0 auto;
display:block;
}
.animationIsOff {
}
JS:
document.getElementById("btn").addEventListener("click", function(){
document.getElementById("btn").className += " animationIsOff";
});
Now look, what I want is... to get the smooth animation from the rotation state of default to the transform: rotate(90deg); when #btn clicked. I wanna do it with adding a new class, say animationIsOff, but there's no smoothness between this two states. IF there's no way to accomplish this smoothness with CSS(by only adding a class with JS), perhaps there's a way to do it with help of JS?
I hope I'm pretty clear to you, otherwise please do ask... I will describe it as I can further.
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
.text-center {
text-align: center;
}
*,
*:before,
*:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
-moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
-webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #2c89c6;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6f6f6f;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
<div class="container">
<ul>
<li class="dropdown">
Select Item <i class="icon-arrow"></i>
<ul class="dropdown-menu">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
</li>
</ul>
</div>
Drop down works fine. But problem is as I want to use it instead of select tag, so I need to minimize the list field after I select a item. And a way that I can take the data as select item works.
*sorry for bad English.
I really like your custom drop-down menu, especially the CSS you included to give some animation to your menu's expand/collapse actions. I've included a modified version of your snippet, and I hope you'll find it to be of help. I'll explain the revisions I made in what is to follow.
First off, let me begin by noting that I have some minor adjustments to the HTML content. In particular, I included an <input> field before the entire drop-down menu markup with a corresponding <label> element. This has been added to provide a quick manner of illustrating how to capture the value of a particular item from within the selection menu. Now, when you click on one of the drop-down menu's list items, that item's value will be inserted in said <input> field.
Next, you'll probably notice that I've added a few class or id attributes to some relevant HTML elements. This is largely as a matter of convenience and to make their selection (through the appropriate JavaScript selectors) easier. One important addition, however, are the data-attributes used on the .dropdown-menu unordered list element. It is a somewhat common pattern seen in normal <select> form inputs where one adds a data-attribute containing the value of each individual <option> element (similar to what is shown here). I will address this briefly at a later point briefly. Though seemingly redundant, giving some data-attribute (or, alternatively, fixing the value attribute) to the content within the opening and closing tags provides an easy way of referencing that same value later without having to resort to the innerHTML method. For more on data-attributes, see this MDN article.
The first thing to note is that I moved all my var declarations to the very top of the script. In your original snippet, you have three separate variable declarations/assignments within the body of a forEach loop:
dropdownArray.forEach(function(el) {
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
/* Some more code follows... */
});
This is the first thing I'd point out that could be improved upon. Specifically, this is less than desirable because you are essentially reassigning the value of the button, menu and arrow variables in each iteration of the forEach loop. Since these are, instead, meant as constant references to fixed elements of the DOM, it's advisable to pull these out of the loop and, by extension, just group them alongside your two variables at the very top. You'll also notice that I have replaced the var keyword with the ES6 const keyword. While this does not change anything outright, I did so to emphasize that these are fixed (i.e., constant) references to elements of the DOM and may not be reassigned.
Next, you'll notice I wrote out a function, clickHandler(), that will be used as the callback function to an event listener that will follow. While it's perfectly fine to just write this function inline (i.e., as an anonymous function and argument to the event listener), I have chosen to decouple it into its own space for clarity.
As you had originally done, I too used the preventDefault() method, here doing so as the first statement in the function's body.
Where you previously had 14 lines of code to add/remove the appropriate classes on the menu and arrow elements, I have only 4. It is quite simple to understand how you can condense this. First and foremost, there is no explicit need to divvy these class addition/removal actions into if and/or else blocks. Rather, you can simply make use of the toggle() method on the classList property of the Element API. For this to function correctly, however, it is necessary to seed the menu and arrow HTML elements with the CSS classes appropriate for the initial state: .hide and .close, respectively. You'll see this reflected in the HTML markup.
The last thing to be done with this function is to add an if conditional to check if the target of the user's click is, in fact, one of the drop-down menu's selection boxes (i.e., the <li>s). This can be done in various ways, but perhaps the cleanest is achieved with the contains() method on the Node API. To this end, I began by making a let declaration (again, ES6 syntax) for targ and assigned it to the DOM node upon which the user clicked. (I made a temporary variable to hold this node so that we wouldn't have to repeatedly refer to it as evt.target in the code that follows; this is, furthermore, a good practice and confers performance benefits, if only minor ones, because the JS engine does not have to repeatedly perform lookups but can, instead, refer to a fixed value held in state as a variable). I then specified by if condition, using here the aforementioned contains() method. The provided conditional expression evaluates the binary (true or false) assertion that targ is a descendant node (read: child element) of the .dropdown-menu unordered-list (given by the menu variable). In the event such is true, the value of the <input> element is assigned to be the value of the data-optValue attribute on the clicked <li> element.
let targ = evt.target;
if (menu.contains(targ)) {
selectionInput.value = targ.dataset.optvalue;
}
In the event the target is not a descendant node of menu, it stands to be reasoned that the user either did not click on an entry of the dropdown-menu or that it was the button element. NOTE: As an alternative to assigning the <input> field's value as the value contained in the custom data- attribute, one could also do as shown below:
if (evt.target !== selectMenu && evt.target !== button) {
selectionInput.value = evt.target.innerHTML;
}
I would (at least from a personal point-of-view), discourage this, as it could complicate things should you, for example, add more HTML content nested within the individual <li> tags of the drop-down menu.
Finally, we conclude with adding a simple event handler. In this case, I've attached the click event to the selectMenu element (i.e., the top-level <ul> tag) passing it the aforementioned clickHandler() function as a callback.
const selectMenu = document.querySelector('#custom-select'),
selectionInput = document.querySelector('#input-field'),
dropdown = document.querySelectorAll('.dropdown'),
dropdownArray = Array.prototype.slice.call(dropdown,0),
button = document.querySelector('a[data-toggle="dropdown"]'),
menu = document.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
// Event callback function:
function clickHandler(evt) {
evt.preventDefault();
menu.classList.toggle('show');
menu.classList.toggle('hide');
arrow.classList.toggle('open');
arrow.classList.toggle('close');
let targ = evt.target;
if (menu.contains(targ)) {
selectionInput.value = targ.dataset.optvalue;
}
}
// 'Click' event registration:
selectMenu.addEventListener('click', clickHandler, false);
// Purely your code below:
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
.text-center {
text-align: center;
}
*,
*:before,
*:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font: normal 40px/1.4 'Pacifico', sans-serif;
text-align: center;
color: #2980B9;
}
.dropdown a { text-decoration: none; }
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
-webkit-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
-moz-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; }
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before { content: '\25BC'; }
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li { padding: 0; }
.dropdown .dropdown-menu li a {
display: block;
color: #6f6f6f;
background: #EEE;
-webkit-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
-moz-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.dropdown .show {
display: block;
max-height: 9999px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
animation: showAnimation 0.5s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
<div class="container">
<label for='input-field'>Selection: </label>
<input type='text' id='input-field' value='' />
<br /><br />
<ul id='custom-select'>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Select Item
<i class="icon-arrow close"></i>
</a>
<ul class="dropdown-menu hide">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</li>
</ul>
</div>
I have a bug with draggable in jQuery. When I rotate image it change axis. Here is FIDDLE.
My javascript code for rotation:
var angle = 0;
document.getElementById('button').onclick = function() {
angle = (angle+90)%360;
document.getElementById('image').className = "rotate" + angle;
}
How can I fix it?
Thank for every answer.
I think transform-origin property will helps to solve problem
#image{
position:absolute;
background-image: url(https://pixabay.com/static/uploads/photo/2013/10/18/09/15/flower-197343_960_720.jpg);
background-size:cover;
width: 350px;
height: 220px;
overflow: hidden;
}
#crop{
width: 100px;
height: 100px;
position:absolute;
cursor: move;
box-shadow: 0px 0px 0px 500px rgba(0, 0, 0, 0.7);
background: transparent;
z-index: 1;
}
#image.rotate90 {
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
}
#image.rotate180 {
transform: rotate(180deg) translate(-100%,-100%);
-webkit-transform: rotate(180deg) translate(-100%,-100%);
-ms-transform: rotate(180deg) translateX(-100%,-100%);
transform-origin: top left;
}
#image.rotate270 {
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
}
By default, the origin of a transform is "50% 50%", which is exactly in the center of any given element. Changing the origin to "top left" (as in the demo above) causes the element to use the top left corner of the element as a rotation point.
Values can be lengths, percentages or the keywords top, left, right, bottom, and center.
I'm trying to position multiple divs on top of a background image so it makes a cool effect. The main issue is that the website is responsive and so is the image - it's background-size: cover which makes it hard to keep the overlays exactly where they need to be when viewing larger / smaller screens. I've created a crude JSFiddle to show what I mean. In this example I'm am trying to just overlay the animated boxes over the Koala's eyes.
I'm not sure if it's easier to get the coords of where I want the overlays to be and work with that or if I need to work with the window offset. Since it's also centered and when zoomed out it changes position-y and I'm unsure how to even track that being a background image.
Really what I'm hoping for is to get some insight on how to track the exact position of coords on this background image or point me in different direction to solve this issue.
#koala { background: url( 'http://i.imgur.com/1xZ17bk.jpg' ) no-repeat center; background-size: cover; position: relative; width: 100%; height: 768px; }
#leftEye,
#rightEye { width: 20px; height: 20px; background-color: #F00; position: absolute;
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
#leftEye { top: 48%; left: 37%; }
#rightEye { top: 59%; right: 35%; }
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.notneeded { width: 100%; height: 50px; background-color: beige; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="notneeded"></div>
<div id="koala">
<div id="leftEye"></div>
<div id="rightEye"></div>
</div>
<div id="footer" class="notneeded"></div>
A much simpler solution is to use the window width changes to your advantage. So, ordinarily, you would measure the changes in your window sizes and subtract that from the eye's current position. However, because your background is centered, you need to alter that slightly - take the old window position, subtract the new window position and divide the result by two.
I've done this with jQuery.
var leftEye = $('#leftEye');
var rightEye = $('#rightEye');
var oldLeftEyePos = leftEye.position().left;
var oldRightEyePos = rightEye.position().left;
var oldWindowWidth = $(window).width();
$(window).resize(function(){
var newWindowWidth = $(window).width();
leftEye.css({
left: oldLeftEyePos - ((oldWindowWidth - newWindowWidth) / 2)
});
rightEye.css({
left: oldRightEyePos - ((oldWindowWidth - newWindowWidth) / 2)
});
});
Here's an updated jsfiddle with an example;
http://jsfiddle.net/joe5hjr3/10/
Disclaimer: This isn't perfect. It shrinks great, but as you go above a certain size, they start to close in on eachother - but hopefully, this is enough to get you on the right track. Also, it does not work great for zooming out, but works fine for zooming in.
Since you asked for pointing in a direction this is what I would try:
If the #koala-divs height is fixed 768px and width responsive 100% I would try to work with:
background-size: 100% auto;
background-position: center;
I guess now you could calculate the position for the rotating divs relative to the #koala-divs width and the proportion of the background-image.
X-coordinates should be easy once you know the x-coordinates of the eyes relative in the image (for e.g. 40% left and 60% right)
Y-coordinates are a bit trickier I assume. Lets say your image is sized 1200 x 800. Its proportion is 3:2 (12:8 -> 6:4 -> 3:2).
Now you could get the total width of the #koala-div with jquery/javascript and multiply it with 0,666666666666666666666666 (two thirds) to get the actual height of the background image.
From there you can derive the y-coordinates similar to the way i proposed for the x-coordinates. But you need to imagine it to be verticaly cut in half and position in relatively in each half.
I don't know if you can follow my thoughs or even if they are useful. Since I got not enough time today I hope this helps nevertheless...
Have a nice Tuesday!
edit/note:
The image will just cover the div as long as the div is at least as wide as the image... If it gets to small/narrow you will get empty space above and below the image.