19 شكل من اضافة Preloading الجزء الثاني

19 شكل من اضافة Preloading الجزء الثاني

يسعدنا أن نكمل معكم الجزء الثاني من اضافة الـPreloaders بهذه الحزمة نأتيكم بأشكال مختلفة كليا عن سابقاتها. اضافات الـPreloaders هي اداة رائعة لتُعلم زوارك بأن الموقع قيد تحميل المحتوى وإظهاره بدون مشاكل أو نقص شيء ما لتقليل فقدان الزوار في تلك المهلة القصيرة، ومع ما يوفره الـ Css في التصميم الحديث فهو يجعل كل تصميم ممكن بأي شكل من الأشكال حتى في التأثير الحركي المطبق على التصميم. لقد غيرت كود التحميل عن الذي في الجزء الأول فإذا جربتم الإضافة على مدونتكم فالخلفية تتلاشى عند نهاية التحميل أما في هذا الجزء فالخلفية تصعد للأعلى ما يتبقى إلا أن ترككم مع المعاينة للأشكال الحزمة من تصميم : jlong

التكويد HTML

الستايل CSS

@import "lesshat";

#Clouds {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  height: 30%;
  overflow: hidden;
  animation: FadeIn 3s ease-out;
  user-select: none;
}

@keyframes FadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@duration: 120s;

.Cloud { 
  position: absolute;
  width: 100%;
  //outline: solid 1px #F00;
  background-repeat: no-repeat;
  background-size: auto 100%;
  height: 70px;
  animation-duration: @duration;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: Float, FadeFloat;
  z-index: 1;
}

@height: 10%;

.Cloud.Foreground { 
  height: @height;
  min-height: 20px;
  z-index: 3;
}
.Cloud.Background { 
  height: @height / 1.1; 
  min-height: 8px;
  animation-duration: @duration * 1.75;
  //animation-delay: -2s;
}

@keyframes Float {
  from { transform: translateX(100%) translateZ(0); }
  to { transform: translateX(-15%) translateZ(0); }
}

/*
@keyframes Float {
  from { transform: translateX(100%) translateY(-100%) translateZ(0); }
  50% { transform: translateX(55%) translateY(0) translateZ(0); }
  to { transform: translateX(-5%) translateY(-100%) translateZ(0); }
}
*/

@keyframes FadeFloat {
  0%, 100% { opacity: 0; }
  5%, 90% { opacity: 1; }
}

.Cloud-Loop (@delay, @i) when (@i > 0) { 
  .Cloud:nth-child(@{i}) { 
    animation-delay: (@delay * @i ); 
    top: unit( @i * 6 ,%);
  }
  .Cloud.Foreground:nth-child(@{i}) {
    animation-duration: (@duration - (@i * 4));
    height: (@height + (@i * 2.5));
  }
  .Cloud.Background:nth-child(@{i}) {
    animation-duration: (@duration * 1.25 - (@i * 4));
    //animation-duration: ((@duration * 1.75) - (@i * 2) );
    height: ((@height / 1.1) - (@i * 1.25));
  }
  
  .Cloud-Loop(@delay, (@i - 1)); // Keep Looping
}
.Cloud-Loop (0) {} // End loop
.Cloud-Loop ((@duration / 6.5 ) * -1, 10);

.Cloud { 
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAABgCAYAAACTzNnjAAAFCklEQVR42u3d34uVRRjA8YMsEi0iSwhdRBGhSJgZiNRFIkWhQVEXBipKUVBBLCF6k0h4UxFkBLq4QT/Qiyi80EgxCjXMWqOMtqy0bBNja92yXatN3c3pGc9sHU/v+X3emWfe93vx+QN23u+e95x5Z94pmNWFQo5NEytErzgoBsSIOCf+FqbEBTEhzophcVTsFxvFEjE152PZHGMukbcB6BAPij0uqgtl0bXCBvyjeFPcS2wEWc0y0ec++Ywnf7rwbyc8grQ6RY8Y9RhhJT+Jde4TmghzFuR08bo4ryDEpE/N58QUYsx+kFPcD4yzCkMsZz+1uwkyu0HeKYYiCLHcN2I2QWYnSPudbHubfy37NuFu4wQZeZD2k2Uw4hDLHRZdBBnnH3K/5ykcX86IeQQZl6civ0XXYv/RlhJkHLZkOMTypz7dBKnbyzmJsfTZeTdB6vRszmIsjXI5QeryWMa/M9ZinzjdTJA63CLGcxzjpD/ElQQZfq3iKDFe8lSHIAPqI8L/6SHIMB4nvorTQQsI0v+teoz4KjpBkH7tIrqaNhCkH9cnbK5C8q/uywiSHzKabCLIdM3K+QR4o8YysfVWcZDvElnD1hNkOi5XuilLu5MlOyzni3vESnGfWCRuIMjm1zgSWPM7GWvNXdonXkdM8Q0dCwmytu8Iy/vK9B3iRoJMnghnqifc8jb7yXkXQf5nLWGo2WR2HUGuLrxPDKq25D6d9yBPE4I6/e6rVO6CnMpkuFq/eLmFKwtyMRde/dOg2XkKkvlH/X5P9ZNSWZBvcMGjMJza6iJlQe7nYkfjozwE+TkXOiprsx7kES5yVOzLYK/IcpA/cJGj806Wg/yaCxzlzsersxpkPxc4SruzGuQBLm603yU7DPOQUOSJWIK0E6j2lcvPm+JJVp+674oDbiFuv5t/fEXs5cJG65DmIO3KY3vG3yCLbXO1N1xVkB3uWfQQFye3rtUS5DN1bC5C9j0cOki7XOwUFwJOb6gg7TmCW1lMizI7QwQ5nW2qqGCv7yDtwsxfGXhU0OczyKvECIOOKvb5CnKa2+TDoKOat3wFyaIH1ONFH0H2MNCo00NpBzmXR39owIy0gzzOIKNOv6X9LHsZg4wGp3xsM/ZMoUfF3aaZ4++qBDnIIKMNzrsHKb11Lb6oEORtDCRSYB81f+vWxzYUJBv2kTYb5vx6gzzHgMHTjsUXagV5BwMFzz78d5NYQpDbGCAEcOzissaEIL9kcBDIx0lBsrwMIW0uD3KcQUHgqaEFpUGyLQGhnSgNkgGBBg8QJDQ5Phkky82g5bvkNQXDscDQY6MNcpiBgBL9NsjDDAS0LPq1Qb7EQECJicLFSUkGAkpMLgMaYzCgKci3GQxomPqZDPImBgMa9uOULifnDWcI7VRpkIsYEAR2sHwX2GcMCgJak/QKPh4lIsgcpOhM2iv7JIODAPqqvY7vPQYInlf6zKsWpN2iOMBAwZMD9bzSudPwvh+kr3gofJ0vve/ikxIp36pXNHosiD2j5gMGD2ksyG3lJK917qc5A4l2eNW04Wi5OaZ41DADilZu0xtMmw/fXCV+ZnDRoFFTfBdpaudlLxVfsXMRNYy7W3SH8XSAu/01bo8s/kL8xQWAM+JC7DIeDnCvZqZ4RGxxi3/3iUPOJ+5TtRXfG/v6jeadNMVjlqsZquG0uwU164ybg2vFuPuh2ax23tkm3N91VLwmbjVNvPT+H7Ro4730ITNPAAAAAElFTkSuQmCC);
}

.Cloud.Background {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAAAqCAYAAAAUJM0rAAACFUlEQVRo3u3aPSwDYRzH8UZEbAYiYrDYjLZGpIPBJLGwSKwi0k1iYBKDdFJsEiMxSZgsFZJGiGjqJWEhSKuaNKRUG8r5PfI8SXOud72+PH2eu2f47Ndv7+V5/nee/G6bh5MWmIV9iEMWvkGjfiADD7AHk9BU6+PSNK0kPAINwwXkC6KU6gvC4HVyKB/clhHHCDnbTqHbSaEaYIv+OK3KyBk274RQrXBXg0B6B/QPkTIUiZTiEIm5gkbZQjXTJ5nG2ZFsocJ1iMQEZQk1VcdIGl2L9Yoeitwj3uocirgRPVRAgEjMoMihkgKFStIzK063QVHYhKF6h/IKFMlKGpaNlhM8Qq1JFIp5gQHeoSIShmJPST/PUElJQ7FN9hivUGmJQxE56OQRKiN5qL/NNY9QKQeEIpdgR7VC9cEqHeGeUyEHXHrMUiWhyKx6BV4dEsNMtNxQI4Ls33h5LidUoEYjXKEXoXZDLbgsEBOzE8qne8fmJhE7oWIujUQcwhyMmy0VSKRRF0cyWlclYMYo1LEKZOgRugpDpVWUot5ZLI8LlwN23bNQKoY1vwpVmmsS6kOFsPRJQl2qENZIqGkVwnp9xb5nUksEcxm2hZlQMcy3OYXTgx0VpOi2pl8/jwqpMP9sF5twBl08ctE7I/dws5l5D5y4OBj51HvdzluYdlik0RL06cjkKpSlB1Span5x/AQb5Hfrxyy/oU5ISeVw53AAAAAASUVORK5CYII=);
}

// Presentational
html, body { margin: 0; padding: 0; }
html { height: 100%; } body { min-height: 100%; }

body {
  color: #FFF;
  background-color: #FD940A;
  background-image: radial-gradient(circle, #F9A72B 0%, #FA9026 70%, #FB6C1F 100%);
}

الجافا Javascript

تعليقات disqus
تعليقات blogger
تعريف الكاتب
تدوينات ذات صلة

8 التعليقات

my web color 11 مارس 2016 في 10:29 ص
المشرف

:)

my web color 11 مارس 2016 في 1:21 م
المشرف

ddd

my web color 26 مارس 2016 في 2:39 ص
المشرف

يي

Unknown 7 أبريل 2016 في 9:26 ص
المشرف

تعليق

Unknown 7 أبريل 2016 في 9:28 ص
المشرف

تعليق

elmodwana 7 أبريل 2016 في 9:31 ص
المشرف

تعليق
تعليق

my web color 7 أبريل 2016 في 9:34 ص
المشرف

ss

my web color 8 أبريل 2016 في 3:37 ص
المشرف

رد تجريبي
رد تجريبي
:)

عبّر عن تعليقكالإبتسامات

الكاتب :my web color

حسن مصطفي مدون مصري ومصمم جرفك إهتميت بكل ما هو جديد في عالم الجرافك والآكواد ولهذا قررت عمل هذة المدونة البسيطة لآنشر كل خبرتي من خلاها لكل يستفيد منها الجميع.

اشترك الان