Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 9, 2018 at 3:21 am #995209
    michaelH

    Hi guys

    I have to say it as well: I really like Enfold, it is just great!

    This is my structure so far:

    Color section with the ID #one
    h2 title and some text in a text block
    More content in columns

    Color section with the ID #two
    h2 title and some text in a text block
    More content in columns

    Color section with the ID #three
    h2 title and some text in a text block
    More content in columns

    The h2 titles currently all have the same font color and do not change when scrolling. All the content is on a onepager with linked items in the main menu which slides down to the particular area after clicking. This works so far. What I want to achieve now is that the h2 title color changes to orange when the particular title is clearly visible.
    I tried to achieve it by forcing it via CSS and with the help of specific classes, no success so far. I also tried to add code blocks in between to create a list with ul and li but that not work either unfortunately. Basically something like this.

    Quick CSS:

    .change-color-on-scroll-active .h2-green-scroll h2 {
color: #2c2c2b;
}

.change-color-on-scroll-active .h2-green-scroll.focus h2 {
color: #37896f;
}

    HTML:

    <ul class="change-color-on-scroll-active">
	<li>
		<p class="h2-green-scroll">
			<h2 class="h2-green">Reisen</h2>
		</p>
	</li>
</ul>

    I would be very glad for any help. Please let me know if you need more detailled information about it.

    Thanks in advance

    August 9, 2018 at 11:14 am #995378
    Ismael

    Hey Michael,

    Thank you for using Enfold.

    Where can we see the site? Please provide the URL and possibly a screenshot of what you’re trying to do, so that we can understand it better.

    Best regards,
    Ismael

    August 9, 2018 at 11:53 am #995402
    Guenni007

    but this will be a function that will depend on scroll and resize. Be carfully with it -because this mostly goes to bad performance.

    $(window).on(‘resize scroll’, function() {
//Code here
});

    you can see here a littel code-pen demo: https://codepen.io/BoyWithSilverWings/pen/MJgQqR

    you see that there is a function defined isInViewport

    • This reply was modified 6 years, 3 months ago by Guenni007.
    August 9, 2018 at 1:30 pm #995456
    michaelH

    Hi Ismael

    Please see two screenshots in the private content field to see what I want to achieve.

    Thanks a lot
    Michael

    August 10, 2018 at 8:38 am #995850
    Ismael

    Hi,

    Thanks for the update.

    In the screenshots, the title “Reisen” didn’t change color. It’s black on both screenshots. Is the site live? We may need to see it in order to understand the issue.

    Best regards,
    Ismael

    August 10, 2018 at 8:53 am #995858
    Guenni007

    maybe we can use the already implemented waypoints script.
    I think he likes to change the color of a h2 when it comes to a specific distance f.e. to top.
    We had those “animations” triggered in this way when it comes to viewport. And i guess this is made by waypoints.
    So perhaps we don’t need any additional script to handle it and use avia_waypoints function

    August 10, 2018 at 9:27 am #995873
    Ismael

    Hi,

    I see. I was a little confused with his latest reply. The title should change to green on focus. Yes, avia_waypoints would help. Please try this in the functions.php file.

    add_action('wp_footer', 'ava_inviewport_script', 9999);
function ava_inviewport_script() {
    ?>
<script>
    (function($) {
        $('.h2-green').waypoint(function(direction) {
            $(this.element).css('color', 'green');
        }, {offset: 'bottom-in-view' , triggerOnce: true, offset: '30%'});

    })(jQuery);
</script>
    <?php
}

    Best regards,
    Ismael

    August 10, 2018 at 10:32 am #995894
    Guenni007

    perfect!
    I don’t know where your h2-green class is ( maybe on the heading alb element) – then you have to select it via : ( .h2-green h2 )

    i got a bit different way if he likes to reverse the change on scrolling up and down:

    add_action('wp_footer', 'scroll_up_down_change', 9999);
function scroll_up_down_change() {
?>
<script>
    (function($) {
		var element_to_animate = $('.h2-green h2');
        element_to_animate.waypoint(function(direction) {
           if (direction === 'down') {
				$(this.element).css('color', 'red');
				  }
				}, {
				  offset: '30%'
				});		
		element_to_animate.waypoint(function(direction) {
             if (direction === 'up') {
				$(this.element).css('color', 'green');
				  }
				}, {
				  offset: '30%'
				});
})(jQuery);
</script>
<?php
}

    you can see it here on some h3 headings: https://webers-testseite.de/datenschutzerklaerung/

    August 10, 2018 at 6:45 pm #996129
    michaelH

    Thank you very much for your help Guenni007 and Ismael – that worked perfectly!
    However I used your solution Ismael, changed the offset value to 50% and used a hex value for the color.

    Is there a documentation about Enfold “waypoint” somewhere where I can see what it is capable of? I basically want to add this feature to images as well, because I have this h2 titles on the page and right below an icon which should change its color from black to green as well. Tried it like this:

    $('.image-change-on-scroll').waypoint(function(direction) {
            $(this.element).css('img url', 'https://startpage.com/wp-content/uploads/2018/07/Logo_green.png');
        }, {offset: 'bottom-in-view' , triggerOnce: true, offset: '50%'});

    But as mentioned if I have a documentation I might be able to figure it out by myself.

    Best regards and thanks again
    Michael

    August 13, 2018 at 5:57 am #996533
    Ismael

    Hi,

    I don’t know where your h2-green class is


    @Guenni007    : Thank you for the script. The “h2-green” is the class attribute of the h2 tag inside @michaelH’s HTML code above. :)

    Is there a documentation about Enfold “waypoint”

    @michaelH: Glad it worked! You’ll find more info about “waypoints” in the following link.

    // http://imakewebthings.com/waypoints/

    Best regards,
    Ismael

    August 13, 2018 at 5:25 pm #996774
    michaelH

    Hi Ismael and Guenni007

    Thanks a lot for the link to waypoints. I could not figure out how this would work with images as well.

    However, I did a nifty workaround to make it work:
    1. Uploaded my SVG logo to fontello and converted it to a webfont there.
    2. Embedded this icon just as others to my page instead of the image and assigned a class to it. The behaviour is exactly the same with changing colors etc. as with the h2 title.

    By the way Guenni007: How did you manage to display a profile picture to your profil at the support forum here? I just can’t find an option.

    Best regards and thank you very much for help, you may close this thread now
    Michael

    August 14, 2018 at 4:04 am #996932
    Ismael

    Hi,

    Awesome! Glad that you found a workaround.

    Regarding the profile picture: you have to attach a gravatar (https://en.gravatar.com) account to your email and that image will be automatically use here in the forum or anywhere else where you use the email.

    Best regards,
    Ismael

    October 17, 2018 at 11:05 am #1022685
    michaelH

    Hi Ismael

    You may close this topic as well please.

    Thanks a lot
    Michael

    October 17, 2018 at 2:58 pm #1022791
    Ismael

    Hi,

    Sure thing. Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Onepager: change h2 title color on focus when scrolling’ is closed to new replies.