<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <p align="center"> scroll page to start animation </p> <div class="container-fluid sa" style="dir="ltr" > <div class="container hidden-xs hidden-sm sa" style="margin-bottom: 80px"> <div class="row sa"> <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 sa" style="position: relative;height: 560px"> <span class="one1"> </span> <span class="one2"> </span> <span class="one3"> </span> <span class="two1"> </span> <span class="two2"> </span> <span class="fore1"> </span> <span class="fiv1"> </span> <div style="position: absolute;text-align: center;z-index: 99" class="test testt"> <img src="http://belmagan.com/demopay/serv2020/wp-content/uploads/2018/05/score2.png" class="ik"> <h5> شركة مسجلة ورسمية </h5> <p class="words"> في صناعات المطابع ودور النشر. كان لوريم إيبسوم نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف </p> </div> <div style="position: absolute;z-index:9;text-align: center;left: 49%;right: 12%;" class="test1"> <img src="http://belmagan.com/demopay/serv2020/wp-content/uploads/2018/05/score2.png"> <h5> شركة مسجلة ورسمية </h5> <p class="words"> في صناعات المطابع ودور النشر. كان لوريم إيبسوم نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف </p> </div> <!--<div class="border1"></div>--> <div style="position: absolute;z-index:9;text-align: center;top: 35%;right: 32%;" class="test2"> <img src="http://belmagan.com/demopay/serv2020/wp-content/uploads/2018/05/score2.png"> <h5> شركة مسجلة ورسمية </h5> <p class="words"> في صناعات المطابع ودور النشر. كان لوريم إيبسوم نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف </p> </div> <!--<div class="border2"></div>--> <span class="three1"> </span> <div style="position: absolute;text-align: center;bottom: 0%;right: 6%" class="test3"> <img src="http://belmagan.com/demopay/serv2020/wp-content/uploads/2018/05/score2.png"> <h5> شركة مسجلة ورسمية </h5> <p class="words"> في صناعات المطابع ودور النشر. كان لوريم إيبسوم نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف </p> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 sa" > <img id="te" src="http://belmagan.com/demopay/serv2020/wp-content/themes/serv5new/images/bulb.png" class="img-responsive bulb"> </div> </div> </div> </div>

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { float:right !important; } .words{ font-size: 10px; width: 74%; margin-right: 16%; } .fore1{ position: absolute; background-color: red; top: 49px; z-index: 9; right: 8.5%; width: 1px; height: 0%; } .fiv1{ position: absolute; background-color: red; top: 45%; z-index: 9; left: 5%; width: 1px; height: 0%; } .one1{ position: absolute; background-color: red; top: 49px; z-index: 9; left: -78px; width: 0%; height: 1px; } .one2{ position: absolute; background-color: red; top: 49px; z-index: 9; left: 26%; width: 0%; height: 1px; } .one3{ position: absolute; background-color: red; top: 49px; z-index: 9; left: 74.5%; width: 0%; height: 1px; } .two1{ position: absolute; background-color: red; top: 251px; z-index: 9; right: 8.5%; width: 0%; height: 1px; } .two2{ position: absolute; background-color: red; top: 251px; z-index: 9; right: 57%; width: 0%; height: 1px; } .three1{ position: absolute; background-color: red; bottom: 21.6%; z-index: 9; left: 45px; width: 0%; height: 1px; } .one11{ width: 25%; transition:2s; } .one22{ width: 36.5%; transition: 1s; transition-delay: 2s; } .one33{ width: 17%; transition: 1s; transition-delay: 4s; } .two11{ width: 42%; transition: 1s; transition-delay: 6s; } .two22{ width: 38%; transition: 1s; transition-delay: 8s; } .three11{ width: 63%; transition: 1s; transition-delay: 10s; } .fore11{ height: 36%; transition: 1s; transition-delay: 5s; } .fiv11{ height: 33.4%; transition: 1s; transition-delay: 9s; } .testt{ transition: 1s; transition-delay: 1s; filter: grayscale(100%); } .test1{ filter: grayscale(100%); } .test2{ filter: grayscale(100%); } .test3{ filter: grayscale(100%); } .testt1{ transform: scale(1.1); filter: grayscale(0%); transition: 1s; transition-delay: 2s; } .test11{ transform: scale(1.1); filter: grayscale(0%); transition: 1s; transition-delay: 3s; } .test22{ transform: scale(1.1); filter: grayscale(0%); transition: 1s; transition-delay: 7s; } .test33{ transition: 1s; transition-delay: 11s; transform: scale(1.1); filter: grayscale(0%); } .bulb{ transition: 1s; filter: grayscale(100%); } .fi{ transition: 1s; filter: grayscale(0%); } /*=================================================================================*/

$(window).scroll(function() { $(".bulb").addClass("fi"); $(".one1").addClass("one11"); $(".testt").addClass("testt1"); $(".one2").addClass("one22"); $(".test1").addClass("test11"); $(".one3").addClass("one33"); $(".fore1").addClass("fore11"); $(".two1").addClass("two11"); $(".test2").addClass("test22"); $(".two2").addClass("two22"); $(".fiv1").addClass("fiv11"); $(".three1").addClass("three11"); $(".test3").addClass("test33"); });