Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • February 1, 2018 at 10:27 am #906128
    bluscht

    Hallo Zusammen,

    wir nutzen die Slideshow (full width) und haben “Centered Text”, welcher über dem Bild eingebadet wird.
    • Headline von Oben > Unten
    • Text-Content von Unten > Oben

    Unser Ziel: Wir möchten gerne das Bild alleine sehen und den Fade erst nach ca. 3-4 Sekunden einblenden lassen.

    Wir haben es bereits probiert mit

      -webkit-animation-delay: 5s!important; /* Safari 4.0 - 8.0 */
    animation-delay: 5s!important;

    allerdings wir der Text dann dennoch eingefadet und nach 5 Sekunden nochmals

    Läßt sich dass machen?
    Noch besser wäre, auch den Color-Layover (bei uns 50% Schwarz) erst nach den 3-4 Sekunden einzuladen.

    THX

    February 1, 2018 at 2:05 pm #906285
    Guenni007

    kannst du den link hier veröffentlichen?
    ich sehe die Möglichkeit der Auswahl wie headline oder text darunter eingeblendet werden nicht in dem Standard ALB Element.
    Das ist ja vorab eingestellt.
    Ausserdem fehlt dir ja auch des Element auf das deine Anweisung greifen soll:
    zB:

    .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content,
.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content
{
visibility: visible;
-webkit-animation: caption-bottom 0.5s 1 ease-out;
animation:         caption-bottom 0.5s 1 ease-out;
}

    wenn es also mit dem korrekten Element hinterlegt ist und es nicht via quick css geht:
    ich denke um das zu ändern ( steht ja in shortcodes.css ) kannst du versuchen das in custom.css einzutragen – bin nicht sicher ob das überschrieben wird

    February 1, 2018 at 2:11 pm #906287
    Guenni007

    it is all in shortcodes.css – this part:

    /*caption frame*/
.avia-caption-content{line-height: 1.3em;}
.avia-caption-content p {margin:15px 0;}

.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title,
.avia-caption .avia-caption-content p, .avia-caption .avia-caption-title{
background: #000;
filter: alpha(opacity = 80);
background: rgba(0, 0, 0, 0.5);
display:inline-block;
margin:0 0 1px 0;
padding:10px 15px;
}

#top .avia-caption-content .wp-smiley{display:none;}
#top .avia-caption-content a{text-decoration: underline;}
#top .avia-caption-content a:hover{text-decoration: none;}

.avia_transform .av_slideshow_full .avia-caption-title{

}

.avia_transform .av_slideshow_full .avia-caption-content, .avia_transform .av_slideshow_full .avia-caption-title,
.avia_transform .av_fullscreen .avia-caption-content, .avia_transform .av_fullscreen .avia-caption-title, 
.avia_transform .av_fullscreen .avia-slideshow-button, .avia_transform .av_slideshow_full .avia-slideshow-button
{
-webkit-transform:translate(0,0);
transform:translate(0,0);
visibility: hidden;
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-content,
.avia_transform .av_fullscreen .active-slide .avia-caption-content
{
visibility: visible;
-webkit-animation: caption-right  1s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
animation:         caption-right  1s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
}

.avia_transform .av_slideshow_full .active-slide .avia-slideshow-button,
.avia_transform .av_fullscreen .active-slide .avia-slideshow-button
{
visibility: visible;
-webkit-animation: caption-left  1.2s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
animation:         caption-left  1.2s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
}

.avia_transform .av_slideshow_full .active-slide .avia-slideshow-button-2,
.avia_transform .av_fullscreen .active-slide .avia-slideshow-button-2
{
visibility: visible;
-webkit-animation: caption-right  1.2s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
animation:         caption-right  1.2s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_fullscreen .active-slide .avia-caption-title
{
visibility: visible;
-webkit-animation: caption-left   1s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
animation:         caption-left   1s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
}

.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content,
.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content
{
visibility: visible;
-webkit-animation: caption-bottom 0.5s 1 ease-out;
animation:         caption-bottom 0.5s 1 ease-out;
}

.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title,
.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-title
{
visibility: visible;
-webkit-animation: caption-top    0.5s 1 ease-out;
animation:         caption-top    0.5s 1 ease-out;
}

.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-slideshow-button,
.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-slideshow-button
{
visibility: visible;
-webkit-animation: caption-top  1.2s 1 ease-out;
animation:         caption-top  1.2s 1 ease-out;
}

    So select the right thing

    February 1, 2018 at 2:22 pm #906291
    Guenni007

    und die Keyframes sind bei shortcodes 5528
    f.e.

    @-webkit-keyframes caption-top {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@keyframes caption-top {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

@-webkit-keyframes caption-bottom {
  0%   { -webkit-transform:translate(0,20px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@keyframes caption-bottom {
  0%   { transform:translate(0,20px); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

    also du siehst die header kommen von oben (-20px) auf position
    die Texte darunter von unten (20px) auf 0

    February 1, 2018 at 3:07 pm #906317
    bluscht

    OK, es war das transition-delay dass gefehlt hatte

    transition-delay:2s;
animation-delay:2s;

    nun geht es super mit:

    .avia_transform .av_slideshow_full .avia-caption-content, .avia_transform .av_slideshow_full .avia-caption-title,
.avia_transform .av_fullscreen .avia-caption-content, .avia_transform .av_fullscreen .avia-caption-title, 
.avia_transform .av_fullscreen .avia-slideshow-button, .avia_transform .av_slideshow_full .avia-slideshow-button
{
-webkit-transform:translate(0,0);
transform:translate(0,0);
visibility: hidden;

}

.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content,
.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content
{
visibility: visible;
-webkit-animation: caption-bottom 2.5s 1 ease-out;
animation:         caption-bottom 2.5s 1 ease-out;
transition-delay:2s;
animation-delay:2s;
}

.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title,
.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-title
{
visibility: visible;
-webkit-animation: caption-top    1.5s 1 ease-out;
animation:         caption-top    1.5s 1 ease-out;
transition-delay:2s;
animation-delay:2s;
}

.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-slideshow-button,
.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-slideshow-button
{
visibility: visible;
-webkit-animation: caption-top  1.2s 1 ease-out;
animation:         caption-top  1.2s 1 ease-out;
transition-delay:2s;
animation-delay:2s;
}
    February 3, 2018 at 11:11 pm #907293
    Basilis

    Hi,

    Can you please also post the site, so we can see which point it is and how it is looking please?

    Thank you

    Best regards,
    Basilis

    February 5, 2018 at 10:24 am #907809
    bluscht

    its currently offline on our local test environment – but I will do after pushing the Website live – cheers

    February 5, 2018 at 8:35 pm #908176
    Basilis

    Hi,

    Thank you very much for keeping us updated.

    Best regards,
    Basilis

    April 6, 2019 at 12:09 pm #1087747
    ERSI19

    Hallo, ich möchte auch gerne meinen text um ca 2-3 sekunden später über das bild legen. Gibt es bitte eine zusammenfassung von dem was ich wo hinzufügen muss?

    Vielen dank vorab.

    April 8, 2019 at 7:50 am #1088161
    Rikard

    Hi ERSI19,

    Could you post a link to your site and try to explain what you are looking to achieve a bit further please?

    Best regards,
    Rikard

    April 8, 2019 at 8:16 am #1088163
    ERSI19

    hi rikard, enclosed the link in private. I would like to delay the text “seien sie einzigartig ….” about 3-4 seconds after seeing the whole picture. rightnow the text comes about 1/2 sec. later. its almost unpossible to see the picture. thanks in advance.
    best regards
    erich

    April 9, 2019 at 6:18 am #1088542
    Rikard

    Hi Erich,

    Thanks for that, please try this in Quick CSS:

    .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title {
    -webkit-animation: caption-top 4s 1 ease-out;
    animation: caption-top 4s 1 ease-out;
}

    Best regards,
    Rikard

    April 9, 2019 at 8:11 am #1088576
    ERSI19

    Hi rikard,
    thanks for your help, rightnow title is almost perfect, probably 1-2 sec. later? (can I just adopt the seconds from 4 to 6s?)
    but the subtitle (” Architektur / Image / Tourismus / Portrait “) is still seen as soon as I start loading the site. can we adopt this as well?

    thank you very much
    kr. erich

    April 9, 2019 at 8:15 am #1088580
    ERSI19

    Hi rikard,
    I tried 10 Sec. which looks very nice. Is it also possible to start the fade-in 3-4 sec. after seeing the whole picture? rightnow the fade-in starts immediatly after loading the picture.
    kr. erich

    April 16, 2019 at 2:58 am #1091181
    Ismael

    Hi,

    Try to add the animation-delay property to set the duration before the animation starts.

    animation-delay: 4s;

    // https://www.w3schools.com/cssref/css3_pr_animation-delay.asp

    Best regards,
    Ismael

    April 16, 2019 at 9:29 am #1091311
    ERSI19

    Hi Ismael;

    i tried, without success, now its even faster in. sorry.
    best regard
    erich

    April 17, 2019 at 11:30 pm #1092164
    Ismael

    Hi,

    Thanks for the update.

    Here’s how the css code should look after adding that property.

    .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title {
    -webkit-animation: caption-top 2s 1 linear 4s;
    animation: caption-top 2s 1 linear 4s;
}

    We should also set the animation timing from “ease-out” to “linear” so that it has the same speed from start to end.

    Best regards,
    Ismael

    April 18, 2019 at 8:52 pm #1092500
    ERSI19

    Hi,
    sorry, but now it comes immediatyl, than fuse in very slow, completly unnormal? sorry for this challenge.
    kr. erich

    April 22, 2019 at 1:44 am #1093181
    Ismael

    Hi,

    Thanks for the update.

    Did you remove the previous css code? Please post the login details in the private field so that we can test it in your installation.

    Best regards,
    Ismael

    April 23, 2019 at 8:15 am #1093549
    ERSI19

    Hi Ismael;
    yes, I tried both. with older css code and without.
    enclosed in private the login – thank you.

    best regards
    erich

    April 24, 2019 at 12:54 pm #1093940
    Ismael

    Hi,

    Thanks for the update.

    We created a new keyframe animation and modified the css code a bit.

    @-webkit-keyframes caption-top-mod {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@keyframes caption-top-mod {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

.av_slideshow_full.avia-fade-slider .avia-caption-title {
opacity: 0;
}

.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title {
   -webkit-animation: caption-top-mod 2s linear 4s;
   animation: caption-top-mod 2s linear 4s;
   animation-fill-mode: forwards;
}

    Please remove the browser cache prior to checking the page.

    Best regards,
    Ismael

    April 26, 2019 at 9:27 am #1094660
    ERSI19

    Hi Ismael,
    wow!! thank you so much! perfect!

    best regards
    erich

    April 29, 2019 at 4:16 am #1095163
    Ismael

    Hi,

    You’re welcome! Glad we could help.

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Slideshow (full width) > Dalay for Text Animation’ is closed to new replies.