Quantcast
Channel: Sample
Viewing all articles
Browse latest Browse all 230

카드 펼치기 형태의 인터랙티브 아트워크

$
0
0
<p>디씨 힛갤에 "<a href="https://gall.dcinside.com/board/view/?id=hit&no=15885" target="_blank" rel="noopener">구글에서 입사 제의 받은 포트폴리오</a>"라는 글이 올라왔다.</p> <p>그 글은 간지나는 디자인을 간지나는 표현으로 깔쌈하게 표현하고있었다. 약간 허세 느낌이 있기도 했지만 진짜 잘난 인간이 해서 그런지 그것조차 멋스러웠다.</p> <p>암튼, 나도 질 수 없어서 인터랙션 아ㄹ트워크(이런 표현이 깔쌈했다)를 하나 만들었다. '구글 디자이너 vs 최근 주식 투자 실패한 32세 4조3교대 인생의 빅매치다 이거야'라며 혼자 섀도우 복싱을 하면서 간만에 뚝딱거려봤다. <p>사실은 저 위 링크에 있는 디자인의 표절작이긴 하지만... 뭐, 나만의 갬성이 쬐금 들어가서 창작물로 인정해주려나? 어쨌거나 생각보다 보기 괜찮아서 블로그에도 올려본다.</p> <p><a href="https://jinh.kr/" target="_blank" rel="noopener">//jinh.kr/</a> 여기에서 실재 적용된 것을 감상할 수 있다. 뒤에 /v1/을 붙이면 기존의 노점상 좌판같던 디자인도 확인할 수 있다.</p> <p>끝.</p> <section id='output'></section> <style> section#output { width: 100%; height: 400px; min-height: 200px; margin-top: 200px; position: relative; left: 0; top: 50%; z-index:1111; transform: scale(0.75); } .control { position: fixed; bottom: 1em; right: 1em; } .item { height: 200px; width: 316px; left: calc(50% - 158px); transition: transform .25s; position: absolute; transform-origin: 50% 700%; } .item .since { position: absolute; top: 8px; right: 12px; opacity: .75; font-size: .75em } .card { width: 100%; height: 100%; transform: rotate(-90deg); border-radius: 10px; position: relative; background: #444; box-shadow: -2px 0px 5px rgba(0, 0, 0, .25); cursor: pointer; color: #fff; transition: box-shadow .25s, margin .25s; } .item.on .card, .card:hover { margin-top: -12px; box-shadow: -5px 0px 11px rgba(0, 0, 0, .25); } /* .card:hover { margin-top: -50px; box-shadow: 7px 0px 10px rgba(0, 0, 0, .25); } */ .card .title { left: 32px; position: absolute; top: calc(50% + 0em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1em; width: 250px; text-align: left; } .card .icon { background: gold; border-radius:5px; width: 32px; height: 32px; left: 34px; position: absolute; top: calc(50% - 32px); } .card .arrow { color: #fff; left: 12px; position: absolute; top: calc(50% - 30px); } .card.light .title, .card.light .date, .card.light .url, .card.light .arrow { color: #212121; } .card .date { position: absolute; width: 100px; left: 200px; text-align: left; font-size: .75em; top: calc(50% + 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card .url { position: absolute; width: 120px; left: 32px; text-align: left; font-size: .75em; top: calc(50% + 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card .tag { right: 6px; position: absolute; top: 6px; opacity: .5; } .info { color: #777; position: absolute; left: 0; opacity: .02; transition: .25s; width: 400px; left: calc(100% + 16px); top: 64px; } .item.on .info, .card:hover .info { opacity: 1; } .info .ititle { font-weight: bold; top: 16px; left: 0; } .info .idate { font-weight: lighter; color: #aaa; top: 48px; left: 0; } .info .idescription { font-weight: lighter; color: #aaa; white-space: nowrap; } </style> <script> const is_mobile = false; // mobile check let item_list = [{ title: "TITLE", id: "morse", icon: "//jinh.kr/images/morse.svg", since_year: "2013", since_month: "01", since_date: "19", url: "/morse/", description: "The quick brown fox jumps over the lazy dog", tag: ["web", "lang"], theme: "4284f3" }, { title: "TITLE", id: "braille", icon: "//jinh.kr/images/braille.svg", since_year: "2019", since_month: "12", since_date: "06", url: "/braille/", description: "The quick brown fox jumps over the lazy dog", tag: ["web", "lang"], theme: "f44336" }, { title: "TITLE", id: "qualify", icon: "//jinh.kr/images/grade-24px.svg", since_year: "2018", since_month: "09", since_date: "29", url: "/qualify/", description: "The quick brown fox jumps over the lazy dog", tag: ["web", "qualified"], theme: "ffffff" }, { title: "TITLE", id: "morse_android", icon: "//jinh.kr/images/morse.svg", since_year: 2018, since_month: 2, since_date: 28, url: "//play.google.com/store/apps/details?id=com.morsecode.translator.jinh&hl=ko", description: "The quick brown fox jumps over the lazy dog", tag: ["android", "lang"], theme: "4caf50" }, { title: "TITLE", id: "bit", icon: "", since_year: 2013, since_month: 8, since_date: 17, url: "/apps/8-BIT", description: "The quick brown fox jumps over the lazy dog", tag: ["web", "art"], theme: "00c853" }, { title: "TITLE", id: "SAT_kr", icon: "//jinh.kr/images/timer-white-18dp.svg", since_year: 2008, since_month: 11, since_date: 13, url: "/SAT_kr/", description: "화학공학과 특) 육각형 잘 그림.", tag: ["web", "qualified"], theme: "d32f2f" }, { title: "TITLE", id: "lotto", icon: "//jinh.kr/images/looks_6-24px.svg", since_year: 2011, since_month: 4, since_date: 29, url: "/lotto/", description: "The quick brown fox jumps over the lazy dog", tag: ["web", "game"], theme: "ffb300" }, { title: "TITLE", id: "battle", icon: "//jinh.kr/images/sports_kabaddi-white-18dp.svg", since_year: 2009, since_month: 1, since_date: 3, url: "//blog.jinh.kr/297", description: "The quick brown fox jumps over the lazy dog", tag: ["web", "game"], theme: "3f51b5" }, { title: "TITLE", id: "mmm", icon: "//jinh.kr/images/pets-white-18dp.svg", since_year: 2016, since_month: 6, since_date: 19, url: "//blog.jinh.kr/835", description: "The quick brown fox jumps over the lazy dog", tag: ["web", "lang"], theme: "009688" }, { title: "TITLE", id: "jw", icon: "//jinh.kr/images/jw.svg", since_year: 2017, since_month: 1, since_date: 19, url: "//**.jinh.kr/", description: "powered by team Cartel.", tag: ["web", "work"], theme: "424242" }, { title: "TITLE", id: "blog", icon: "//jinh.kr/images/rss_feed-white-18dp.svg", since_year: 2007, since_month: 3, since_date: 21, url: "//blog.jinh.kr/", description: "The quick brown fox jumps over the lazy dog", tag: ["web"], theme: "212121" }, { title: "TITLE", id: "bucket", icon: "//jinh.kr/images/playlist_add_check-24px.svg", since_year: 2014, since_month: 10, since_date: 3, url: "/bucket/", description: "The quick brown fox jumps over the lazy dog", tag: ["web", "qualified"], theme: "ff5722" }, // { // title: "  0000-0000-0000-0000", // id: "bucket", // icon: "images/web-24px.svg", // since_year: 2020, // since_month: 10, // since_date: 3, // url: "/test/", // description: "", // tag: [""], // theme: "212121" // }, ]; const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; function deg2rad(deg) { return deg * Math.PI / 180; } function rad2deg(rad) { return rad * 180 / Math.PI; } function hex2hsl(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); var r = parseInt(result[1], 16); var g = parseInt(result[2], 16); var b = parseInt(result[3], 16); r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } s = s * 100; s = Math.round(s); l = l * 100; l = Math.round(l); h = Math.round(360 * h); return [h, s, l]; } for (var i = 0; i < item_list.length; i++) { let hsl = hex2hsl(item_list[i].theme); item_list[i].hue = hsl[1] == 0 ? 255 + hsl[2] : hsl[0]; item_list[i].lightness = hsl[2]; } function card_spread(data, key, type) { if (type == undefined) { type = "asc"; } data.sort(function(a, b) { var x = a[key]; var y = b[key]; if (type == "desc") { return x > y ? -1 : x < y ? 1 : 0; } else if (type == "asc") { return x < y ? -1 : x > y ? 1 : 0; } }); $(".item").remove(); for (var i = 0; i < data.length; i++) { let year = data[i].since_year.toString().substring(2, 4); let month = (data[i].since_month.toString().length == 1) ? "0" + data[i].since_month : data[i].since_month; let is_light = data[i].lightness >= 70; // function tag(i) { // let tag = ""; // for (var j = 0; j < item_list[i].tag.length; j++) { // tag += "#" + item_list[i].tag[j] + " "; // } // return tag; // } let info = "<span class='ititle'>" + data[i].title + "</span><br>" + "<span class='idate'>" + monthNames[data[i].since_month - 1] /*.substring(0, 3).toUpperCase()*/ + "-" + data[i].since_year + "</span><br>" + "<span class='idescription'>" + data[i].description + "</span>" let tag = "" $("section#output").append("<div class='item " + data[i].id + "'><div class='card " + (is_light ? "light" : "") + "' style='background:#" + data[i].theme + "'><span class='arrow'>‹</span><img class='icon'><span class='title'>" + data[i].title + "</span><span class='date'>" + month + "/" + year + "</span><span class='url'>" + data[i].url.toUpperCase() + "</span><div class='info'>" + info + "</div>" + tag + "</div></div>"); } if (!is_mobile) card_rotate(-window.pageYOffset / scroll_unit); } const card_width = 200; let rotate_list = []; let rotate_unit = 15; //rotate origin let scroll_unit = 20; function card_rotate(val) { let rotate_origin = window.innerWidth / 500 + 2; //rotate origin $(".item").each(function() { let i = $(this).index(); // let rotate = -3.75 + (i + .5) * rotate_unit / 2 + val; let rotate = i * rotate_unit / 2 + val - 30; rotate_list[i] = Math.abs(rotate); rotate = rotate < 45 ? rotate : rotate < -45 ? -45 : 45; // let pos_x = Math.abs(Math.sin(deg2rad(rotate > -45 ? rotate : -45)) * card_width * rotate_origin); function get_r(rotate) { if (rotate - i < -30) { // left end return -30 + i; } else if (rotate - i > 31 - item_list.length) { // right end return 31 + i - item_list.length; } else { return rotate; } } $(this).css({ "transform": "rotate(" + get_r(rotate) + "deg)", "transform-origin": "50% " + rotate_origin * 100 + "%" }); // if (i == 9) console.log([ // // $(this).parent().children().length, // i, // // window.innerWidth / 2, // $(this).offset().left, // get_r(rotate) // ]); }); let target = rotate_list.indexOf(Math.min.apply(null, rotate_list)); $('.item').removeClass("on"); $('.item:nth(' + target + ')').addClass("on"); // $('body').height(window.innerHeight + (item_list.length - 1) * rotate_unit * scroll_unit / 2); // console.log(11 * rotate_unit / 2 - window.pageYOffset / scroll_unit); } card_spread(item_list, "hue"); if (!is_mobile) { window.addEventListener('scroll', function(event) { console.log("aaa"); card_rotate(-window.pageYOffset / scroll_unit); }); window.addEventListener('resize', function(event) { console.log("aaa"); card_rotate(-window.pageYOffset / scroll_unit); }); // $(document).ready(function() { // $("#splash").addClass("off"); // }); } $(window).on('load', function() { $("#splash").addClass("off"); }); </script>

Viewing all articles
Browse latest Browse all 230

Trending Articles