I want to hover over an image (music album) and then a record rolls out, so I want it to move to the right and to rotate a bit. It can already move to the right but I can't get it to rotate with it.
the #cover1 is the album and the #coverrecord1 is the record that needs to roll out, i like to keep it as simple as possible as i am not a pro in coding.
Many thanks.
$(document).ready(function (){
$("#cover1").hover(
function() {
$("#coverrecord1").stop().animate({ left: '5%' });
},
function() {
$("#coverrecord1").stop().animate({ left: '0' });
}
);
});
You can also skip js if you wish :)
.album {
background-color: orange;
height: 10em;
margin: 3em auto;
position: relative;
width: 10em;
}
.album:after, .album:before {
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.album:after {
background-color: orange;
z-index: 1;
}
.album:before {
background-image: linear-gradient(to left, gray, black);
border-radius: 50%;
transition: transform 500ms;
}
.album:hover:before {
transform: translate3d(40%, 0%, 0) rotate(30deg);
}
<div class="album"></div>
Related
I'm using the hamburger toggling method from the AMP-WP website and replaced the text with a symbol ☰ to create the hamburger.
https://amp-wp.org/documentation/playbooks/toggling-hamburger-menus/
<?php echo( '☰' ); ?>
Everything works great, apart from I'd like to change the symbol to ✕ when the menu is open/active.
What PHP is required to do this please?
You need to take a different approach where your icon is really a set of HTML elements where each line is separate and can be targeted by animation, CSS transforms in this case:
const hamburger = document.querySelector('#hamburger-toggle');
hamburger.addEventListener('click', function() {
if (this.classList.contains('open')) {
this.classList.remove('open');
} else {
this.classList.add('open');
}
});
#hamburger-toggle {
position: relative;
cursor: pointer;
height: 40px;
width: 50px;
margin: 10px 0;
padding: 10px 0;
}
.hamburger-line {
display: block;
width: 24px;
height: 2px;
background-color: black;
margin-top: 6px;
opacity: 1;
}
.hamburger-line-1 {
margin-top: 0;
}
.hamburger-line-1, .hamburger-line-3 {
transform-style: preserve-3d;
transition: transform 200ms; /* this line animates the change in position */
transform: translateY(0px) rotateZ(0deg);
}
.hamburger-line-2 {
transition: opacity 200ms; /* this line animates the change in opacity fading in/out the middle hamburger line */
}
#hamburger-toggle.open .hamburger-line-1 {
transform-style: preserve-3d;
transition: transform 200ms;
transform: translateY(8px) rotateZ(44deg);
}
#hamburger-toggle.open .hamburger-line-2 {
transition: opacity 200ms;
opacity: 0;
}
#hamburger-toggle.open .hamburger-line-3 {
transform-style: preserve-3d;
transition: transform 200ms;
transform: translateY(-8px) rotateZ(-44deg);
}
<div id="hamburger-toggle">
<span class="hamburger-line hamburger-line-1"></span>
<span class="hamburger-line hamburger-line-2"></span>
<span class="hamburger-line hamburger-line-3"></span>
</div>
I have used following css classes to create a popup box for a button click event.
<style type="text/css">
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 10;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
Popup is working as expected.But when I scroll down on the popup,images and text which are not in the popup area(Which are below the popup) are also displayed as they are on the same level.I have included a screen shot of my problem.Can any one help me in this? Where have I gone wrong?
I have obtained these classes from the Bootsnip site
https://bootsnipp.com/snippets/featured/ecommerce-quick-view-popup-amp-product-row
This is the problematic view
Just add z-index: 1 to .overlay. This should fix this issue.
See CSS z-index property for more informations.
I can't see a different z-index value in this case, but If you do, just increase the number of z-index.
Through PHP the steps are counted and added in a session to avoid returning to the beginning in case of updating or refreshing the page, the value is obtained by means of the following variable $step
<?php
session_start();
if ( !empty($_SESSION['datos_form']['__step__'])) {
$step = $_SESSION['datos_form']['__step__'];
} else {
$step = '1';
}
?>
We receive the value of the variable in the jQuery javascript code.
show_step(<?= $step; ?>);
That would be equal to: (for the default value received)
show_step(1);
Each step of the process is shown according to the value received from PHP to the Javascript code as it was already mentioned.
Without the need to add additional controls like the following:
current = $(this).parent();
next = $(this).parent().next();
I have the following simple wizard with CSS
https://jsfiddle.net/2LL8x1sm/
I need to be able to adapt it to the ajax javascript code so that it animates the step in which it is.
The current code already had an animation using a technique called sprite
function animacion(caso){}
What I need is to be able to adapt the animation of the process, and using an icon (like this one) that goes sliding with the bar of progress similar to the following image:
This animation must be added inside the function animacion(caso) {} that works together with the back links and continue, add an example within the fuction in the following code:
$( ".test" ).animate({ "left": "-=50px" }, "slow" );
And in effect it works, the div with the test class was modifying the left style by continuing in each step.
How can I animate the process of my html code css?
$(function() {
show_step(<?= $step; ?>);
});
function animacion(caso){
//$( ".test" ).animate({ "left": "-=50px" }, "slow" );
};
// function to save the form data and change the step
function show_step(step){
var data = $( "#form" ).serialize();
var url = 'saveTemp.php?step=' + step;
$.ajax({
type: "POST",
url: url,
data: data
})
.done(function( resp ) {
$('.step').css( "display", "none" );
$('#step'+step).fadeIn("slow");
//animation of each step
animacion(step);
});
};
.container {
width: 100%;
padding-top: 20px;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li > * {
position: relative;
padding-bottom: 20px;
display: inline-block;
font-size: 1.4rem;
color: #2c3f4c;
top: -45px;
}
.progressbar li:before {
content: '';
width: 12px;
height: 12px;
display: block;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #edeff0;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #edeff0;
top: 4px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
background-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <div class="test"></div> -->
<div class="container">
<ul class="progressbar">
<li class="active"><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ul>
</div>
<form id="form" action="procesar.php">
<div id="step1" class="step">
<h1>step 1</h1>
<a data-ref="#" onclick="show_step(2)">continue</a>
</div>
<div id="step2" class="step">
<h1>step 2</h1>
<a data-ref="#" onclick="show_step(1)">after</a>
<a data-ref="#" onclick="show_step(3)">continue</a>
</div>
<div id="step3" class="step">
<h1>step 3</h1>
<a data-ref="#" onclick="show_step(2)">after</a>
<button>Send</button>
</div>
</form>
Is this correct understanding of what you need?
function animacion(caso) {
if (!caso) {
document.getElementsByClassName("progressbar")[0].setAttribute("data-active", "");
} else {
document.getElementsByClassName("progressbar")[0].setAttribute("data-active", caso);
}
var items = document.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!caso) {
item.className = "";
} else if (i < caso) {
item.className = "active";
} else {
item.className = "";
}
}
}
setTimeout(function () {
animacion(1);
}, 1000);
setTimeout(function () {
animacion(2);
}, 2000);
setTimeout(function () {
animacion(3);
}, 3000);
setTimeout(function () {
animacion(2);
}, 4000);
setTimeout(function () {
animacion(1);
}, 5000);
setTimeout(function () {
animacion(null);
}, 6000);
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li > * {
position: relative;
padding-bottom: 20px;
display: inline-block;
font-size: 1.4rem;
color: #2c3f4c;
top: -45px;
/* new code start */
top: -65px;
/* new code end */
}
.progressbar li:before {
content: '';
width: 12px;
height: 12px;
display: block;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #edeff0;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #edeff0;
top: 4px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
background-color: green;
/* new code start */
-webkit-transition: background 300ms ease;
transition: background 300ms ease;
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
/* new code end */
}
/* removed code start */
/*
.progressbar li.active + li:after {
background-color: green;
}
*/
/* removed code end */
/* new code start */
.progressbar {
position: relative;
padding: 0;
margin: 0;
}
.progressbar:after {
content: "";
height: 4px;
left: 16.666%;
background: green;
top: 4px;
position: absolute;
-webkit-transition: width 300ms ease;
transition: width 300ms ease;
}
.progressbar[data-active="1"]:after {
width: 0;
}
.progressbar[data-active="2"]:after {
width: 33%;
}
.progressbar[data-active="3"]:after {
width: 66%;
}
.progressbar[data-active=""]:before {
opacity: 0;
}
.progressbar:not([data-active=""]):before {
opacity: 1;
-webkit-transition: left 300ms ease, opacity 300ms ease;
transition: left 300ms ease, opacity 300ms ease;
}
.progressbar[data-active="1"]:before {
left: 16.666%;
}
.progressbar[data-active="2"]:before {
left: 50%;
}
.progressbar[data-active="3"]:before {
left: 83.333%;
}
.progressbar:before {
content: "";
height: 16px;
width: 16px;
margin-top: -24px;
margin-left: -8px;
left: 16.666%;
background: khaki;
top: 4px;
position: absolute;
-webkit-transition: left 300ms ease;
transition: left 300ms ease;
}
/* new code end */
<div class="container">
<br><br><br><br><br><br>
<ul class="progressbar" data-active="">
<li><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ul>
</div>
There is minor change in markup and style. Rectange indicates block where you can insert your icons.
im doing this project for university. i'm currently facing a minor problem but yet disturbing.
link to site: http://haw.finekost.com/ws2013/PP_HATE_SITE/
CSS:
.box {
filter: grayscale(1);
float: left;
height: 0;
margin: 0;
moz-filter: grayscale(1);
ms-filter: grayscale(1);
o-filter: grayscale(1);
opacity: 0.5;
padding-bottom: 20%;
position: relative;
webkit-filter: grayscale(1);
width: 20%;
}
.box:hover {
cursor: pointer;
moz-filter: all .5s ease-in-out;
opacity: 1;
webkit-filter: grayscale(0);
webkit-transition: all .5s ease-in-out;
}
img {
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
the boxes are generated via php.
the image boxes change in size (just 1px) when i hover them. i really dont know why they do it. Hopefully someone can help me
it appears to be related to the webkit transition filter in your .box:hover
Maybe this will help?
Prevent flicker on webkit-transition of webkit-transform
actually if you add -webkit-backface-visibility: hidden; to the box:hover css it appears this will fix the problem.
It is happening due to your webkit-transition style rule setup on your box:hover selector.
If you take it out, then there is no 'flicker'. THe reason it does not happen in Firefox is because you do not have a firefox vendor property set there such as -moz-transition.
Why do you need a transition in this case ?
In your website you use for .box a width of 20%. It looks like this causes somehow a 1px gap. However this could be solved by using width: 20vw for .box.
vw is viewport width in % this removed the 1px border.
So use:
.box {
filter: grayscale(1);
float: left;
height: 0;
margin: 0;
moz-filter: grayscale(1);
ms-filter: grayscale(1);
o-filter: grayscale(1);
opacity: 0.5;
position: relative;
webkit-filter: grayscale(1);
padding-bottom: 20vw;
width: 20vw;
}
I have the following CSS
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}
.jScrollPaneTrack {
position: absolute;
right: 50%;
top: 0;
height: 100%;
}
.jScrollPaneDrag {
position: absolute;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
.scroll-pane {
width: 100%;
height: 100%;
display:block;
overflow: auto;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 50%;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}
a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 50%;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}
.jScrollPaneTrack {
background: url(/images/track.gif) repeat-y;
}
.jScrollPaneDrag {
background: url(/images/drag_middle.gif) no-repeat 0 50%;
}
.jScrollPaneDragTop {
background: url(/images/drag_top.gif) no-repeat 0 0;
height: 4px;
}
.jScrollPaneDragBottom {
background: url(/images/drag_bottom.gif) no-repeat 0 0;
height: 4px;
}
a.jScrollArrowUp {
height: 11px;
background: url(/images/arrow_up.gif) no-repeat 0 0;
cursor:default;
}
a.jScrollArrowUp:hover {
background-position: 0 -11px;
}
a.jScrollArrowDown {
height: 11px;
background: url(/images/arrow_down.gif) no-repeat 0 0;
cursor:default;
}
a.jScrollArrowDown:hover {
background-position: 0 -11px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
background-position: 0 -22px;
}
This is where I load the css stylesheet in my classic asp code which is in the head of the html:
<link href="/css/jScrollPane.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/scripts/jScrollPane.js"></script>
<script type="text/javascript">
$(function()
{
// this initialises the demo scollpanes on the page.
$('#pane1').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane2').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane3').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane4').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane5').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane6').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
});
</script>
<script>
Can someone explain to me why it takes about 50 secs to load the drag-*.gifs and the arrow up and down gifs. Im really confused on why it takes so long to load simple images. Could this be a cache issue? Here is an image for the results I got from my webpage.
Multiple HTTP requests can really slow down a web page loading time. Have a look at this CSS sprites tutorial for an idea of how you can get dramatic speed improvements.