Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Is there any way to modify the bootstrap carousel. i want to give an effect where the slide will be faded in and faded out instead of sliding left to right or right to left.
Yes you can modify the bootstrap carousel by overriding the CSS. Add the following <style> tag in your HTML page and it will fade in/out the carousel instead of sliding effect.
<style>
/* Fade transition for carousel items */
.carousel .item {
left: 0 !important;
-webkit-transition: opacity .4s; /*adjust timing here */
-moz-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
}
.carousel-control {
background-image: none !important; /* remove background gradients on controls */
}
/* Fade controls with items */
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
}
</style>
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Are there any ready library for implementing endless moving elements effect(like when you put mouse on the top image here http://deadsign.ru) ? If there are no any of them, what is the best way to implement a thing?
You can use CSS3 transition with the infinite duration property.
If you don't need complex stuff, CSS3 transition would be enough.
That websites does so:
.hover .post .post-top a.img:after {
display: block;
}
.post.post-main .post-top a.img:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
opacity: 0;
background: url(../images/x1/pattern-1.png);
animation: pattern 7.2s linear 0s infinite;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
-webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I am working on a site .As you can see there's a menu item called Digital Marketing. The item has a submenu called Digital Marketing Consultancy.i want the submenus like in any other websites with the dropdown effect like when we hover the menu item the submenus dropsdown.
eg : like the menu here.
I have tried giving
.sub-menu{display:none;}
.sub-menu:hover{display:block;}
here is the fiddle .how can i make it like the menu effects in other sites.Please help.Thanks!!
updated fiddle
Pure css solution is CSS(3) transitions.
http://jsfiddle.net/9gjbfvwy/
use width and height 0, with overflow hidden.
Use CSS3 transitation to set them to auto.
See fiddle (it's your code, with 3 additions)
ul.sub-menu{height:0;width:0;overflow:hidden;}
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;}
ul.sub-menu {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sub-menu is your submenu, so you need to fire your hover on your main menu item, not on your submenu item.
Add this to your css:
ul#menu-main li ul.sub-menu{
display:none;
}
ul#menu-main li:hover ul.sub-menu{
display:block;
}
Working jsFiddle: http://jsfiddle.net/wyy7e61o/1/
You should initially hide all the submenus and show them when hovering the parent menu.
Like
.sub-menu {
display: none;
}
.menu-item:hover > ul.sub-menu {
display: block;
}
Check Updated fiddle here
http://jsfiddle.net/wyy7e61o/6/
This question already has answers here:
Animate background image change with jQuery
(9 answers)
Closed 8 years ago.
My HEADER element has a background image and I need to swap it to another image after a 3 second delay, I have looked all over the internet and I cannot find a solution! I have tried CSS3 and Jquery and I just cant get it to work.
Because of the way the website is built, it has to be the background image of the element that changes and not a nested Div within the HEADER element.
--- SOLVED / SOLUTION ---
JS
$(document).ready(function() {
$("header").delay(5000).queue(function() {
$(this).css({
"background-image": "url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"
});
});
});
CSS
header {
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
-ms-transition:all 1s ease-in;
transition:all 1s ease-in;
}
A similar question has been asked before - This should give you an answer
Change CSS background-image with different intervals via jQuery
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am completely new to the jquery scene, and so am having some trouble trying to figure this out. My problem is:
I am creating a website for a project, and this website is based of a square (700px by 700px) that has been divided into 4 smaller squares - all 350px by 350px.
What I want to do is have each of these smaller squares have a panel covering them, that when clicked, move away to reveal the content behind them. The two panels on the left side would slide to the left and disappear, and the two on the right would slide to the right and disappear.
If possible I would like only one panel to disappear at a time. So as one would click a new panel, the previous one would slid back into position, hiding its content again.
Any help would be greatly appreciated!
There are many ways to do the sort of thing you're interested in. CSS transitions have already been mentioned. I've included a working example but it is very basic - it should get you moving in the right direction. Please take a look at the links below - they've got a lot of great information.
If you have four elements, and the main function of the covers is just to cover, you could use :after (or :before) CSS pseudo-elements. Here's what that HTML markup could look like if your panels were li elements:
<ul>
<li id="panelOne">One</li>
<li id="panelTwo">Two</li>
<li id="panelThree">Three</li>
<li id="panelFour">Four</li>
</ul>
Since the covers are only there to hide your four panels and they're pseudo-elements, you'd style them in your CSS. You could start by styling your HTML elements:
ul {
display: block;
background: black;
width: 700px;
height: 700px;
margin: 0 auto;
}
li {
float: left;
position: relative;
background: white;
border: 1px solid black;
width: 350px;
height: 350px;
}
Then style your :after covers:
li:after {
display: block;
/*the background color is just to make the covers more visible */
background: red;
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 350px;
content: "";
}
If you use jQuery to add a class (for example, ".clicked") to one panel at a time, you'd style the .clicked pseudo-elements so they move to the left or right:
li#panelOne.clicked:after, li#panelThree.clicked:after {
-webkit-transform: translateX(-350px);
-moz-transform: translateX(-350px);
-ms-transform: translateX(-350px);
-o-transform: translateX(-350px);
transform: translateX(-350px);
}
li#panelTwo.clicked:after, li#panelFour.clicked:after {
-webkit-transform: translateX(350px);
-moz-transform: translateX(350px);
-ms-transform: translateX(350px);
-o-transform: translateX(350px);
transform: translateX(350px);
}
And use jQuery to add or remove the class:
$( 'li' ).click(function(){
//first remove the class from ALL panels
$( 'li' ).removeClass( 'clicked' );
//then add to the panel that's been clicked
$(this).addClass( 'clicked' );
});
And one more step: since you want the covers to slide to the left or right, you'll need to add CSS transitions to achieve that. You'd place them in your :after pseudo-element styles:
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
And here's how that would all look in a jsfiddle: http://jsfiddle.net/rt9d5/10/embedded/result/
Try using the Jquery UI Accordion http://jqueryui.com/accordion
You can create multiple collapsible panels and set whether it to have one panel open at a time (or multiple if you want).
My Suggestion would be to look at this, do a little research, and if you have any more questions post a more specific question on stackoverflow.