Slide Loading Social Buttons with jQuery, CSS3 & PHP

    Rating: ★★★★☆
    View: 163
    Download: 84
    Từ khóa:

    So, I have decided to create a set of top social buttons (Facebook, Google & Twitter), which will load only when user decides to share your content, otherwise we do not load them.

    I have created two files for this example, one is regular HTML file where our share buttons will be loaded, other one is a PHP file which will accept Ajax request and return the set of share buttons.

    HTML

    You need to place this HTML code within your page where you want share button to appear. Since its CSS position will be “fixed“, you can place it anywhere within BODY part of your page and play a bit with “sw-share-wrp” class in CSS section to adjust its final position.

     

    CSS

    Since the arrival of CSS3, we can create so many nifty effects just using CSS3. So, why not give a nice rotating animation to share icon using this technology? Let’s spin our share icon on mouse hover. The CSS3 code below makes our share icon spin clockwise and anticlockwise, but we want to control it using jQuery event rather than regular CSS :hover, you will find rest of the CSS in sample file.

    .sw-share-icon.yspin{
        -webkit-animation: spinY 0.5s;
        -moz-animation: spinY 0.5s;
        animation: spinY 0.5s;
    }
    .sw-share-icon.xspin{
        -webkit-animation: spinX 0.5s;
        -moz-animation: spinX 0.5s;
        animation: spinX 0.5s;
    }
    
    @-moz-keyframes spinX{ 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spinX{ 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spinX{ 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
    
    @-moz-keyframes spinY{ 100% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes spinY{ 100% { -webkit-transform: rotate(-360deg); } }
    @keyframes spinY{ 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg

    JQuery

    Here’s jQuery part of the example, we will basically load social buttons using jQuery Ajax when a user hovers the mouse over the share icon, and then to have CSS3 spin effect, we just add and remove “xspin” and “yspin” classes to sw-share-iconelement.

    PHP

    PHP part is pretty straight forward, I have added 3 top social buttons here, you can add other share buttons such as linkedin, digg etc. if you want, but I haven’t tested their functionality with Ajax, I am pretty sure they will too work just fine!

    ';
        
        echo '
  • '; echo '
    '; echo '
  • '; echo '
  • '; echo '
    '; echo '
  • '; echo '
  • '; echo '
    '; echo '
  • '; echo ''; echo '
    ×
    '; } ?>

     

    loading Đang tải...

    template được ưa chuộng