{"id":1922,"date":"2021-09-05T13:03:56","date_gmt":"2021-09-05T04:03:56","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=1922"},"modified":"2023-01-04T22:07:16","modified_gmt":"2023-01-04T13:07:16","slug":"animation3","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/09\/05\/animation3\/","title":{"rendered":"SCSS(\u30ab\u30d0\u30fc\u30b9\u30e9\u30a4\u30c9)"},"content":{"rendered":"

\u30ab\u30d0\u30fc\u30b9\u30e9\u30a4\u30c9\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308b<\/h3>\n

HTML\u306e\u8a18\u8ff0<\/h3>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Document<\/title>\r\n  <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n  <div id=\"container\">\r\n<!-- \u30db\u30d0\u30fc\u3057\u305f\u3068\u304d\u306b\u6697\u304f\u3059\u308b -->\r\n    <!-- <div class=\"cover-slide hover-darken inview\">\r\n<img class=\"img-zoom\" src=\"images\/image-1.jpg\" alt=\"\">\r\n  <\/div> -->\r\n<!-- \u30a2\u30b9\u6bd4\u3092\u4fdd\u3061\u305f\u3044\u3068\u304d\u306e\u8a2d\u5b9a -->\r\n  <div class=\"cover-slide hover-darken inview\">\r\n  <div class=\"bg-img-zoom img-bg50\"><\/div>\r\n  <\/div>\r\n  <\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n
\r\n<\/pre>\n
mixin\u306e\u8a18\u8ff0<\/h3>\n
\n
@mixin animation($name, $duration: 1s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: forwards) {\r\nanimation: {\r\nname: $name;\r\nduration: $duration;\r\ntiming-function: $timing-function;\r\ndelay: $delay;\r\niteration-count: $iteration-count;\r\ndirection: $direction;\r\nfill-mode: $fill-mode;\r\n }\r\n}<\/code><\/pre>\n<\/div>\n
SCSS\u306e\u8a18\u8ff0<\/h3>\n
<\/p>\n
\n
@import \"mixin\";\r\n\r\n\/\/ \u753b\u50cf\u306e\u30ba\u30ec\u3092\u4fee\u6b63\u3059\u308b\u8a2d\u5b9a\r\nimg {\r\n\/\/ \u753b\u50cf\u306e\u6a2a\u5e45\u3092Window\u306e\u30b5\u30a4\u30ba\u3068\u540c\u3058\u306b\u3059\u308b\r\n  max-width: 100%;\r\n\/\/ \u753b\u50cf\u3068\u306e\u30ba\u30ec(\u4f59\u767d)\u3092\u89e3\u6d88\u3059\u308b\r\n  vertical-align: bottom;\r\n}\r\n.cover-slide {\r\n  position: relative;\r\n\/\/ \u30d1\u30f3(\u62e1\u5927)\u3057\u305f\u3068\u304d\u306e\u4f59\u5206\u306a\u90e8\u5206\u3092\u30ab\u30c3\u30c8\r\n  overflow: hidden;\r\n\r\n  &::after {\r\n\/\/ \u7591\u4f3c\u8981\u7d20\u306b\u5fc5\u9808\u306e\u8a2d\u5b9a\r\n    content: \"\";\r\n    position: absolute;\r\n    z-index: 2;\r\n\/\/ \u753b\u50cf\u306b\u5fc5\u8981\u306a\u8a2d\u5b9a\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n\/\/ \u30b3\u30b3\u307e\u3067\r\n    background-color: #eaebe6;\r\n    opacity: 0;\r\n    }\r\n  &.inview {\r\n  &::after {\r\n  opacity: 1;\r\n\r\n  @include animation(\r\n    $name: kf-cover-slide,\r\n    $duration: 1.6s,\r\n    $timing-function: ease-in-out\r\n);\r\n  }\r\n }\r\n}\r\n\r\n\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u6700\u9069\u306a\u30d7\u30ed\u30d1\u30c6\u30a3(\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u826f\u3044)\r\n  @keyframes kf-cover-slide {\r\n  0% {\r\n\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8d77\u70b9\u306e\u8a2d\u5b9a\r\n    transform-origin: left;\r\n    transform: scaleX(0);\r\n}\r\n  50% {\r\n    transform-origin: left;\r\n    transform: scaleX(1);\r\n}\r\n  50.1% {\r\n    transform-origin: right;\r\n    transform: scaleX(1);\r\n}\r\n  100% {\r\n    transform-origin: right;\r\n    transform: scaleX(0);\r\n  }\r\n}\r\n\r\n.img-zoom {\r\n\/\/ \u521d\u671f\u72b6\u614b\u306f\u900f\u660e\u306b\u3059\u308b\r\n  opacity: 0;\r\n\r\n.inview & {\r\n\/\/ inview\u304c\u767a\u706b\u3055\u308c\u305f\u3068\u304d\u900f\u660e\u5ea6\u89e3\u9664\u3057\u3064\u3064\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\r\n  opacity: 1;\r\n  transition: transform 0.3s ease;\r\n  @include animation(\r\n    $name: kf-img-show,\r\n    $duration: 1.6s,\r\n    $timing-function: ease-in-out,\r\n\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u7d42\u308f\u3063\u305f\u3068\u304d\u306e\u8a2d\u5b9a\u3092\u6b8b\u3055\u306a\u3044(\u89e3\u9664)\r\n    $fill-mode: normal\r\n);\r\n\/\/ \u30db\u30d0\u30fc\u3057\u305f\u3068\u304d\u306b\u62e1\u5927\u3059\u308b\u3088\u3046\u306b\u3059\u308b\r\n  &:hover {\r\n    transform: scale(1.05);\r\n  }\r\n }\r\n}\r\n\r\n  @keyframes kf-img-show {\r\n  0% {\r\n    opacity: 0;\r\n}\r\n  50% {\r\n    opacity: 0;\r\n}\r\n\/\/ 50\uff05\u306b\u306a\u3063\u3066\u304b\u3089\u30d1\u30f3(\u62e1\u5927)\u3057\u305f\u753b\u50cf\u3092\u51fa\u3057\u305f\u3044\u306e\u3067\r\n  50.1% {\r\n    opacity: 1;\r\n    transform: scale(1.5);\r\n}\r\n  100% {\r\n    opacity: 1;\r\n }\r\n}\r\n\/\/ \u30db\u30d0\u30fc\u3057\u305f\u3068\u304d\u306b\u6697\u304f\u3059\u308b\u8a2d\u5b9a\r\n  .hover-darken {\r\n  &::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n\/\/ \u753b\u50cf\u306e\u4e0a\u306b\u8868\u793a\u3057\u305f\u3044\r\n    z-index: 4;\r\n    transition: background-color 0.3s ease;\r\n    pointer-events: none;\r\n  @include animation(\r\n    $name: kf-img-show,\r\n    $duration: 1.6s,\r\n    $timing-function: ease-in-out,\r\n    $fill-mode: normal\r\n);\r\n}\r\n  &:hover::before {\r\n    background-color: rgba(0, 0, 0, 0.4);\r\n }\r\n}\r\n\/\/ .bg-img-zoom\u3092\u4f7f\u3046\u3068\u304d\u306e\u8a2d\u5b9a\r\n  .bg-img-zoom {\r\n     background-image: url(images\/run.jpg);\r\n\/\/ \u30ea\u30d4\u30fc\u30c8\u306a\u3057\r\n     background-repeat: no-repeat;\r\n\/\/ \u30dd\u30b8\u30b7\u30e7\u30f3\u3092\u30bb\u30f3\u30bf\u30fc\r\n     background-position: center;\r\n     background-size: cover;\r\n     width: 100%;\r\n     height: 400px;\r\n\/\/ \u4e0a(80\u884c\u76ee)\u306e.img-zoom\u306e\u8a2d\u5b9a\u3092\u8aad\u307f\u8fbc\u3080\r\n     @extend .img-zoom\r\n}\r\n\r\n.img-bg50 {\r\n  position: relative;\r\n\/\/ \u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3092\u4fdd\u3061\u305f\u3044\u3068\u304d\u306e\u8a2d\u5b9a\r\n  &::before {\r\n    display: block;\r\n    content: '';\r\n    padding-top: 50%;\r\n }\r\n} \r\n\r\n\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u6700\u9069\u3067\u306a\u3044\u30d7\u30ed\u30d1\u30c6\u30a3\r\n\/\/ @keyframes kf-cover-slide {\r\n\/\/ 0% {\r\n\/\/ left: 0;\r\n\/\/ right: 100%;\r\n\/\/ }\r\n\/\/ 50% {\r\n\/\/ left: 0;\r\n\/\/ right: 0;\r\n\/\/ }\r\n\/\/ 100% {\r\n\/\/ left: 100%;\r\n\/\/ right: 0;\r\n\/\/ }\r\n\/\/ }\r\n<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\u30ab\u30d0\u30fc\u30b9\u30e9\u30a4\u30c9\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308b HTML\u306e\u8a18\u8ff0 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″&g […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[17,27,14],"tags":[],"class_list":["post-1922","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming-note","category-scss"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/1922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/comments?post=1922"}],"version-history":[{"count":10,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/1922\/revisions"}],"predecessor-version":[{"id":7228,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/1922\/revisions\/7228"}],"wp:attachment":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/media?parent=1922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/categories?post=1922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/tags?post=1922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}