Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'animations'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 2 results

  1. Hello! My website is https://mastercarsreview.com/ and I want to have a cool animation on my Blog pages "News" and "Reviews", and the "Gallery" page. I want the blog post to enlarge while hovering and the images set in the Gallery page to enlarge also on hover. Does anyone have an idea about the Custom CSS? Thanks you in advance.
  2. The aim is to get text blocks slide in on scroll. I stumbled across this "CSS Animation Cheat Sheet" by Justin Aguilar that does exactly this. I've followed the steps and added the code in the required sections. Following is the code in the Header Section: <squarespace:script src="plugin.js" combo="true" /> <squarespace:script src="site.js" combo="true" /> <link rel="stylesheet" type="text/css" href="www.justinaguilar.com/animations/css/animations.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> Following code in the Footer (just before the /body tag) Section: <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function() { $('page-559a88fbe4b02af487910a44').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+400) { $(this).addClass("slideUp"); } }); }); </script> And following in the block that I want the animation to appear in: <div id="page-559a88fbe4b02af487910a44" class="slideUp"> The following CSS was added to the Custom CSS section: #page-559a88fbe4b02af487910a44{ visibility:hidden; } The above CSS in the Custom CSS seems to work as the text is hidden. However, the animation does not work on scroll. Any help in what I'm doing wrong would be appreciated.
×
×
  • Create New...