Torn Paper Effect

HTML CSS JS Tidy

@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");

:root {
  --margin: 5px;
  --w: 45vw;
  --sepia: 1;
}
@property --sepia {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}
@property --w {
  syntax: "<length-percentage>";
  initial-value: 20vw;
  inherits: true;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}
body {
  font-family: "Oswald", sans-serif;
  position: relative;
  width: 100vw;
  min-height: 100vh;
  text-align: center;
  overflow-x: hidden;
  background: pink;
  color: aquamarine;
}

#bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  background-position: center;
  /*
  animation: 3s sepia ease-out infinite alternate;
*/
  filter: grayscale(var(--sepia));
}
#bg,
.torn_img {
  background-image: url(https://images.unsplash.com/photo-1560707303-4e980ce876ad?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
}
.inner,
.outer,
.torn_img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform-origin: center;
}
.inner {
  width: calc(var(--w) - 0.5 * var(--margin));
  height: calc(100vh - 0.5 * var(--margin));
  background: black;
  filter: url(#noise);
}
.outer {
  width: calc(var(--w) + var(--margin) * 2);
  height: calc(100vh + var(--margin) * 2);
  margin-top: calc(-1 * var(--margin));
  margin-left: calc(-1 * var(--margin));
  background: white;
  filter: url(#noise) drop-shadow(0px 0px 1rem rgba(0, 0, 0, 1))
    drop-shadow(0px 0px 0.5rem rgba(0, 0, 0, 0.5));
}
.torn_img {
  width: 100vw;
  height: 100vh;
  background-position: center;
  mask-image: linear-gradient(
    to right,
    white calc(var(--w) + var(--margin) / 1.5),
    transparent calc(var(--w) + var(--margin) / 1.5)
  );
  mix-blend-mode: lighten;
}
@keyframes anim {
  to {
    --w: 70vw;
  }
}
@keyframes sepia {
  to {
    --sepia: 0;
  }
}
#torn {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*
  animation: 5s anim -3s ease-in-out infinite alternate;
  */
}
#bg,
#torn {
  transform-origin: center;
  transform: rotate(-20deg) scale(1.4);
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: -1;
}

main {
  position: absolute;
  top: 0;
  left: 0;
}
section {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 10vw;
  font-weight: normal;
  text-transform: uppercase;
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}

HTML CSS JS Tidy

Torn Paper Effect

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply