<div class="transition-container-outer">
  <div class="container mx-auto transition-container-inner">
    <div class="transition-cover"></div>
  </div>  
</div>
<div class="container px-8 sm:px-16 lg:px-32 xl:px-48  mx-auto bg-white">
  <div class="relative md:pb-4 pt-32 md:flex">
    <div class="text-3xl text-gray-800 font-bold pb-2 md:pb-8">Cloud Computing</div>
    <div class="md:absolute relative flex right-0">
      <img class="w-16 h-16 m-2 mr-4 rounded-full" src="https://i.pravatar.cc/300"/>
      <div>
        <div class="text-gray-700 font-bold">John Smith</div>
        <div class="text-blue-400 font-regular">Data Engineer</div>
        <div class="text-gray-500 font-light">john.smith@example.co.uk</div>
      </div>
    </div>
  </div>
  <hr/>
  <div class="py-4 text-justify">
    Cloud Computing has been adopted by many users for personal use. It allows documents from popular applications such as Word and Excel to be created and edited from your browser without the needing the application installed on your computer. Mobile apps also give you access from your smartphone. The most common use case is cloud storage, but web-based application services like Google Docs are becoming more popular due to their accessibility and enhanced sharing features. In particular there has been a rapid rise in use of cloud based word processing applications among students. Cloud storage is also great for collaborative projects where it allows multiple people to access, and work on, the same storage space. Cloud storage has many other benefits such as backups to prevent against data loss from hardware failure and other events that could otherwise be catastrophic.
  </div>
  <div class="py-4 text-justify">
    There are already many cloud storage providers competing to provide storage, with more cropping up all the time. Also increasing is the amount of storage each provider is offering which seems to grow regularly. Cloud storage has been around for a long time, although the form it has taken has changed somewhat in the last 5 years. For example, video hosting sites like YouTube have been hosting millions of user-uploaded videos for over a decade and social networks like Facebook and Twitter have been hosting users pictures and other content for some time. Services like Google Drive, which offer more comprehensive cloud storage, have launched more recently. One of the earliest personal cloud storage providers, Dropbox, launched towards the end of 2008.
  </div>
  <div class="py-4 text-justify">
    In the corporate sector, cloud computing can be very advantageous because, perhaps most importantly, cloud computing allows users to access services without control or expertise of the infrastructure behind them. When it comes to storage, companies only need to pay for the storage they actually use and it prevents against data loss be it by natural disaster or hardware failure as the storage providers generally ensure data safety through redundancy techniques. Generally there are multiple backup servers located around the world. Cloud storage for businesses is not always less expensive but it incurs operating expenses rather than capital expenses. It is easy for organizations to choose between different cloud storage options depending on their requirements. For instance, continuous operations, disaster recovery, and different types of security. In addition any maintenance tasks relating to the storage can be offloaded to the provider.
  </div>
  <hr/>
  <div class="text-right pt-4 pb-32 text-sm font-light text-gray-600">
    made with <a class="text-blue-400" href="https://tailwindcss.com/">Tailwind CSS</a>
    and the <a class="text-blue-400" href="https://rsms.me/inter/">Inter typeface family</a>
  </div>
</div>
// Using turbolinks we can define the transition elements to persist between pages
// Then we can just call the animation when a page change is made
// Could even pause the transition at 50% until page load completes?
//
@import url('https://rsms.me/inter/inter.css');
html {
  font-family: 'Inter', sans-serif;
  background: #e2e8f0;//#ddd;
}
.container {
  //background: #ccc;
}
hr {
  border-width: 1px;
}

.transition-container-outer {
  width: 100%;
  z-index: 100;
  position: fixed;
  height: 100vh;
  //border: 2px solid rgba(0, 255, 0, 0.5);
}

.transition-container-inner {
  
  height: 100vh;
  overflow: hidden;
  //border: 4px solid rgba(0, 0, 255, 0.5);
}

.transition-cover {
  position: relative;
  width: 150vw;
  height: 150vw;
  
  background: #fff;
  animation: transition 3s infinite;
  animation-timing-function: linear;

  //border: 25px solid rgba(255, 0, 0, 0.5);
}

//@media (min-width: 1280px)
//.transition-container {
//    max-width: 1280px;
//}
//@media (min-width: 1024px)
//.transition-container {
//    max-width: 1024px;
//}
//@media (min-width: 768px)
//.transition-container {
//    max-width: 768px;
//}
//@media (min-width: 640px)
//.transition-container {
//    max-width: 640px;
//}


@keyframes transition {
  0% {
    transform: skewY(45deg) translate(0, 5000px);
  }
  50% {
    transform: skewY(45deg) translate(0, 0);
  }
  100% {
    transform: skewY(45deg) translate(0, -5000px)
  }
}

View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.2/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.