I am having three fields as name, designation and description.
Here first I need to display name, designation first later on after some time needs to display description as of now it is displaying the total at a time.
<div class="teamspage4">
<img src="<?php echo base_url();?>admin/images/blogimages/<?php echo $r->image_path;?>" class="img-responsive teamimage"/>
<div class="teamspage5"><?php echo $r->name;?></div>
<div class="teamspage6"><?php echo $r->designation;?></div>
<div class="teamspage76"><?php echo $r->description;?></div>
</div>
Try this
.teamspage5{
opacity:0;
animation: op 1s ease forwards;
}
.teamspage6{
opacity:0;
animation: op 1s ease forwards;
}
.teamspage76{
opacity:0;
animation: op 1s ease 1s forwards;
}
#keyframes op{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
<div class="teamspage5">Name</div>
<div class="teamspage6">Designation</div>
<div class="teamspage76">Description</div>
Related
I have this code with ng-repeat and delay in css:
<div class="card moveUp" ng-repeat="x in optionsCards" style="animation: moveUp 0.50s ease forwards;">
<span class="fec">Updated Aug 29, 2016</span>
<span class="title">Internet Banner Advertising…</span>
</div>
I need that the delay value in every item of ng-repeat , increase. For example:
First item: animation: moveUp 0.50s ease forwards
Second item: animation: moveUp 0.60s ease forwards
Third item: animation: moveUp 0.70s ease forwards
How can I make that ?
Thanks
You could use the ngStyle directive with $index.
See this working example with keyframes:
angular.module('MyApp', []);
.moveUp {
position: relative;
}
#-webkit-keyframes moveUp {
0% {
top: 500px;
}
100% {
top: 0px;
}
}
#keyframes moveUp {
0% {
top: 500px;
}
100% {
top: 0px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div class="card moveUp" ng-repeat="x in [1,2,3,4,5,6] track by $index" ng-style="{'animation': 'moveUp ' + ($index / 2) + 's ease forwards'}">
<span class="fec">Updated Aug 29, 2016</span>
<span class="title">Internet Banner Advertising…</span>
</div>
</div>
The result will give you 0.5s, 1s, 1.5s and so on...
You can substitute 0.50s in style attribute with angular expression. A simple solution would be:
<div class="card moveUp" ng-repeat="x in optionsCards" style="animation: moveUp {{ (0.5 + 0.1 * $index) + 's' }} ease forwards;">
$index contains an index of current ng-repeat element so if you multiply it by 0.1 and add to base 0.5, each item will have delay 0.1s longer than its predecessor.
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 6 years ago.
I'm using css3 to animate some text. I'm just trying to fade it in, and then disappear only to do it again a few seconds later (after other animations). The problem i'm having is my text fades in but immediately disappears even though i have the keyframe finish # opacity:1; Why is my text disappearing? Here's the code:
<style>
#myArea {
height:250px;
width:300px;
position:relative;
overflow:hidden;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
opacity:1;
}
#txt1 {
animation: txt1-fade 1s 1 ease-in;
animation-delay:1s;
}
#txt2 {
-webkit-animation: txt2-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt2-fade 5s infinite;
}
#txt3 {
-webkit-animation: txt3-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt3-fade 5s infinite;
}
#keyframes txt1-fade {
0% {opacity: 0; left:10px;}
100% {opacity: 1; left:10px;}
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
By default elements return to their original state after an animation is completed. You can keep the state in which the element is in at end of animation by applying animation-fill-mode: forwards;
http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
I am needing to fadeIn a list of text and then fade each one out individually using css. Here is an example I did using javascript. Any help would be appreciated. I have read some examples of how to animate stuff with css but do not know the best practices or anything to complex.
I am thinking I need to create a wrapper div with a overflow of hidden and a separate div with all the text that is position absolute in the wrapper. Then animate the .text div up or down to show the text. I have no experience with css animations.
Here is what I want to do but with css not javascript:
http://jsfiddle.net/trav5567/8ejqsywu/
Here is my javascript:
var quotes = $(".whoiam").find('h2');
var quoteIndex = -1;
quotes.hide();
function showNextQuote() {
++quoteIndex;
console.log(quoteIndex);
if(quoteIndex === quotes.length){
console.log($(this));
//console.log('index greater than or equal to h2 length');
//$(this).fadeIn('200');
}else{
console.log('Kepp going');
quotes.eq(quoteIndex % quotes.length)
.fadeIn(500)
.delay(500, checkIndex(quoteIndex,quotes.length))
.fadeOut(500, showNextQuote);
}
}showNextQuote();
function checkIndex(index, length){
var length = length-1
if(index === length){
console.log('check good');
end();
}
}
Here is my HTML:
<div id="splash-wrapper">
<div class="row">
<div class="small-12 columns">
<h1>Travis M. Heller</h1>
<div class='whoiam'>
<h2>Front End Developer</h2>
<h2>Illustrator</h2>
<h2>Web Master</h2>
<h2>Front End Developer</h2>//This value will be the last to show on loop.
</div>
<button class="btn center gotoPortfolio">ENTER</button>
</div>
</div>
</div>
An experiment with just css animations: http://jsfiddle.net/8ejqsywu/6/
There is one animation which moves the text list verticaly, and another which fades in and out the text. The difficulty was to synchronize them!
#container{
overflow:hidden;
height:48px;
}
.whoiam{
-webkit-animation: move;
position:relative;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: step-start;
-webkit-animation-delay: 0.5s
}
h2{ height:48px;margin:0;padding:0}
#-webkit-keyframes move {
0% { margin-top: 0em; }
25% { margin-top: -48px; }
50% {margin-top: -96px;}
75% {margin-top: -144px; }
100% {margin-top: 0;}
}
h2{
-webkit-animation: fade;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
I'm trying make images in a slideshow behave like links, so when user clicks on the image it will take them to that url.
The slideshow is made using css animations. It's based on this tutorial.
As you can see I already tried wrapping it in an tag but that doesn't work, I think the animation is affecting the images ability to work as a link...
My HTML
<div class="slideshow">
<figure>
<img src="c5.jpg" width="484" height="330" />
</figure>
<figure>
<img src="14.jpg" width="484" height="330" />
</figure>
<figure>
<img src="c3.jpg" width="484" height="330"/>
</figure>
<figure>
<img src="c2.jpg" width="484" height="330" />
</figure>
<figure>
<img src="12.png" width="484" height="330" />
</figure>
</div>
Some of my CSS:
.slideshow figure:nth-child(1) {
-webkit-animation: goldfade 20s 16s infinite;
-moz-animation: goldfade 20s 16s infinite;
-ms-animation: goldfade 20s 16s infinite;
animation: goldfade 20s 16s infinite;
}
.slideshow figure:nth-child(2) {
-webkit-animation: goldfade 20s 12s infinite;
-moz-animation: goldfade 20s 12s infinite;
-ms-animation: goldfade 20s 12s infinite;
animation: goldfade 20s 12s infinite;
}
#-webkit-keyframes "goldfade" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
18% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=0);
opacity: 0;
}
96% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
change the href to the img's src property, if you're trying to open the image:
<a href="c13.jpg">
<img src="c13.jpg">
</a>
wrap the image tags with an anchor tag and provide the href attribute your desired link.Then your image will act like a link.That might serve your purpose
<a href='....your link...'>
<img src='imageName.png'>
</a>
I am seeking to do the same thing, but neither answer above seems to work. The example given above already has each <img> surrounded with an anchor. When I try wrapping each image with a unique anchor, only the last anchor defined works.
Add anchor tag in all slider_images for providing link:
<a href='link of page that you want to open'>
<img src='image.jpg'>
</a>
I have an image that I've gotten to rotate in an endless circle.
However, I'd like to know if it is possible to show only a section of the image. For example:
Below is the code I have to make the image rotate.
.vinyl {
height:2072px;
width:2072px;
display:block;
position:absolute;
top: -1150px;
left: -200px;
background:url('http://level42.ca/mike-vinyl/img/Record.png') right no-repeat;
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-ms-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
This is going on a wordpress theme and is ideally going to fill the header background. (Approx 1500x300 px)
I've got the image in the header, but it is on top of all other objects, and covers have the webpage.
Hope this makes sense.
*Note, this is just a prototype/idea that I have, not sure if it will be practical or completely implemented at all.
[Edit 1]
Following the suggestion below, I was able to achieve exactly what I was looking for, however. The site-sponsorship class that I have is stuck in the background. How can I force it on top?
<header id="masthead" class="site-header" role="banner">
<div class="vinyl-wrapper">
<div class="vinyl-background">
</div>
<h2 class="site-sponsorship">
<div>
<span style="">Presented by: </span>
<img src="http://level42.ca/mike-vinyl/img/sunriselogo3.png" style="width:200px;height:62px;vertical-align:bottom">
</div>
</h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php get_search_form(); ?>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->
Certainly possible, you could wrap the rotating image inside of a container element with relative positioning and hidden overflow. For example, with a container .header:
.header{
width:100%;
height:200px;
/* These are the important styles */
position:relative;
overflow:hidden;
}
Here's a JSFiddle demonstrating the implemented code, using the same CSS that you provide. Hope this helps! Let me know if you have any questions.
EDIT: In your addition to your question, it doesn't look like you close .vinyl-wrapper. If this was intentional, then you could use z-index to get .site-sponsorship to appear on top:
.site-sponsorship {
position:relative;
z-index:1;
}
Otherwise (if .site-sponsorship is actually outside .vinyl-wrapper), the fix will need to be a bit different, and you could also absolutely position .site-sponsorship (still using z-index):
.site-sponsorship {
position:absolute;
z-index:1;
top:0;
}
Here's a JSFiddle showing the second fix.