| Patrone, Cut Film Effects for Film Photography |
[Demo] 티스토리, 사진에 필름효과 만들기
Film Maker Kodak Film Model Ekar 100 Camera Model Nikon FM2 Film Loaded 2022. 1. 29. Film Unloaded 2022. 2. 1. Equipment Nikkor Ai 50mm F1.4, Helios 44M-6 55mm F2.
dd-stuff.tistory.com
| Code & Download |
<!-- 아래 테이블을 서식으로 지정, 포스트에 삽입 -->
<table id="filmEff" style="width:100%">
<tbody>
<tr>
<td style="width:35%">Film Maker</td>
<td class="filmMaker" style="background-color:#151515; color:#fff; width:65%">..</td>
</tr>
<tr>
<td style="width:35%">Film Model</td>
<td class="filmModel" style="background-color:#151515; color:#fff; width:65%">..</td>
</tr>
<tr>
<td style="width:35%">Camera Model</td>
<td class="camera" style="background-color:#151515; color:#fff; width:65%">..</td>
</tr>
<tr>
<td style="width:35%">Film Loaded</td>
<td class="loaded" style="background-color:#151515; color:#fff; width:65%">2022. 1. 1.</td>
</tr>
<tr>
<td style="width:35%">Film Unloaded</td>
<td class="unloaded" style="background-color:#151515; color:#fff; width:65%">2022. 2. 1.</td>
</tr>
<tr>
<td style="width:35%">Equipment</td>
<td class="equipment" style="background-color:#151515; color:#fff; width:65%">..</td>
</tr>
</tbody>
</table>
:root {
/* 이미지블럭 - Cut Film */
--fig-width:860px; /* 너비 */
--fig-margin-bottom:60px; /* 간격 */
--fig-margin-bottom-mobile:30px; /* 간격 - 모바일 */
--fig-background-image:url(https://tistory1.daumcdn.net/tistory/4556597/skin/images/CutFilm.png); /* 배경 이미지 url */
--image-width-land:92.3%; /* 가로 사진 너비 3:2 */
--image-width-land43:81.4%; /* 가로 사진 너비 4:3 */
--image-width-pano:98%; /* 가로 사진 너비 panorama */
--image-width-port:61.6%; /* 세로 사진 너비 */
--film-maker-margin-left:40px; /* 필름 메이커 왼쪽 여백 */
--film-model-margin-right:40px; /* 필름 모델 오른쪽 여백 */
--film-maker-model-margin-top:40px; /* 필름 메이커, 모델 윗 여백 */
--film-number-margin-right:40px; /* 필름 컷 넘버 오른쪽 여백 */
--film-number-margin-bottom:40px; /* 필름 컷 넘버 아래 여백 */
--film-number-margin-right-mobile:10px; /* 필름 컷 넘버 오른쪽 여백 - 모바일 */
--film-number-margin-bottom-mobile:16px; /* 필름 컷 넘버 아래 여백 - 모바일 */
--film-sum-color:rgba(204, 169, 0, 0.8); /* 필름 모델, 메이커, 컷 넘버 폰트 컬러 */
--film-sum-font-size:11px; /* 필름 모델, 메이커, 컷 넘버 폰트 크기 */
--caption-margin-top:670px; /* 캡션 윗 여백 */
--caption-margin-top-mobile:240px; /* 캡션 윗 여백 - 모바일 */
/* 롤 정보 - Patrone */
--roll-sum-width:860px; /* 너비 */
--roll-sum-background-image:url(https://tistory4.daumcdn.net/tistory/4556597/skin/images/35mmPatrone.png); /* 배경 이미지 url */
--roll-sum-margin-bottom:40px; /* 첫 사진과의 간격 */
--roll-sum-font-family:'Arial'; /* 롤 정보 레이어 폰트 */
--roll-sum-font-color:rgba(255, 255, 255, 0.66); /* 폰트 컬러 */
--roll-sum-font-size:14px; /* 폰트 사이즈 */
--roll-sum-line-height:34px; /* 줄 간격 */
/* 롤 정보 - 모바일 - NoteTag */
--roll-sum-font-size-mobile:13px; /* 폰트 사이즈 */
--roll-sum-line-height-mobile:16px; /* 줄 간격 */
--emoji-camera:'📷 ';
--emoji-gear:'⚙️ ';
--emoji-timer:'⏳ ';
}
/* 이미지블럭 - Cut Film */
.imageblock { width:var(--fig-width); height: calc(var(--fig-width) / 4 * 3); margin-bottom:var(--fig-margin-bottom) !important; background-image:var(--fig-background-image); background-position:center center; background-repeat:no-repeat; background-size:contain; display:flex !important; justify-content:center; align-items:center }
.imageblock img.land { width:var(--image-width-land) !important; height:auto }
.imageblock img.land.r43 { width:var(--image-width-land43) !important; height:auto }
.imageblock img.pano { width:var(--image-width-pano) !important; height:auto }
.imageblock img.square { width:var(--image-width-port) !important; height:auto }
.imageblock img.port { width:var(--image-width-port) !important; height:auto; transform:rotate(270deg) }
.imageblock figcaption { position:absolute; width:100%; margin-top:var(--caption-margin-top) }
.fMaker { position:absolute; left:var(--film-maker-margin-left); top:var(--film-maker-model-margin-top) }
.fModel { position:absolute; right:var(--film-model-margin-right); top:var(--film-maker-model-margin-top); text-align:right }
.fNumber { position:absolute; right:var(--film-number-margin-right); bottom:var(--film-number-margin-bottom); text-align:right }
.fMaker, .fModel, .fNumber { font-size:var(--film-sum-font-size); font-weight:400; color:var(--film-sum-color); width:fit-content; height:fit-content }
/* 롤 정보 - Patrone */
.patrone { width:calc(var(--roll-sum-width) - 20px); height:calc((var(--roll-sum-width) - 20px) / 2); margin-left:auto; margin-right:auto; margin-bottom:var(--roll-sum-margin-bottom); background-image:var(--roll-sum-background-image); background-size:contain; background-position:center center; background-repeat:no-repeat; display:flex !important; align-items:center }
.patrone .filmName { width:145px; height:223px; writing-mode:vertical-lr; font-size:30px; font-weight:900; margin-left:13px; margin-top:22px; text-shadow:1px 1px 1px rgba(255, 255, 255, 0.2); display:flex; justify-content:center; align-items:center; letter-spacing:1px }
.patrone .filmName.agfa { background:linear-gradient(90deg, #ae010a, #de0611, #ae010a); color:#e5e5e5 }
.patrone .filmName.kodak { background:linear-gradient(90deg, #c48d01, #ffb700, #c48d01); color:#222 }
.patrone .filmName.fuji { background:linear-gradient(90deg, #53c073, #09892d, #53c073); color:#222 }
.patrone .filmName.ilford { background:linear-gradient(90deg, #dadada, #fff, #dadada); color:#04a121 }
.patrone .filmName.foma { background:linear-gradient(90deg, #161a53, #21289a, #161a53); color:#e5e5e5 }
.patrone .filmName.lomo { background:linear-gradient(90deg, #b61725, #ed1a2d, #b61725); color:#e5e5e5 }
.patrone .filmName.adox { background:linear-gradient(90deg, #bc4028, #f35233, #bc4028); color:#e5e5e5 }
.patrone .filmName.rollei, .patrone .filmName.kent { background:linear-gradient(90deg, #dadada, #fff, #dadada); color:#222 }
.patrone .rollInfo { margin-top:16px; margin-left:140px }
.patrone .rollInfo p { font-family:var(--roll-sum-font-family); font-size:var(--roll-sum-font-size); color:var(--roll-sum-font-color); line-height:var(--roll-sum-line-height); letter-spacing:1px }
.patrone .rollInfo p:nth-child(1) { font-size:18px }
#filmEff { display:none }
/* 모바일 */
@media screen and (max-width:1024px) {
.imageblock { margin-bottom:var(--fig-margin-bottom-mobile) !important }
.imageblock figcaption { margin-top:var(--caption-margin-top-mobile) }
.fMaker, .fModel { display:none }
.fNumber { width:15px; height:fit-content; text-align:center; right:28px !important; bottom:24px !important }
.patrone { margin-bottom:var(--roll-sum-margin-bottom) }
.patrone .filmName { width:104px; height:161px; writing-mode:vertical-lr; font-size:20px; font-weight:900; margin-left:10px; margin-top:15px; text-shadow:1px 1px 1px rgba(255, 255, 255, 0.2); }
.patrone .rollInfo { width:330px; margin-top:16px; margin-left:90px }
.patrone .rollInfo p { font-family:var(--roll-sum-font-family); font-size:var(--roll-sum-font-size); color:var(--roll-sum-font-color); line-height:24px; letter-spacing:1px }
.patrone .rollInfo p:nth-child(1) { font-size:16px }
}
@media screen and (max-width:480px) {
.imageblock { margin-bottom:var(--fig-margin-bottom-mobile) !important }
.imageblock figcaption { margin-top:var(--caption-margin-top-mobile) }
.fMaker, .fModel { display:none }
.fNumber { width:15px; height:fit-content; text-align:center; right:var(--film-number-margin-right-mobile) !important; bottom:var(--film-number-margin-bottom-mobile) !important }
.patrone { margin-bottom:0px !important }
.patrone .filmName { width:90px; height:78px; writing-mode:vertical-lr; font-size:12px; font-weight:900; margin-left:4px !important; margin-top:7px !important; text-shadow:1px 1px 1px rgba(255, 255, 255, 0.2); letter-spacing:0px }
.patrone .rollInfo { margin-top:8px; margin-left:50px }
.patrone .rollInfo p:nth-child(1) { font-size:15px !important }
.notetag { width:calc(100% - 20px); height:fit-content; padding:10px; background-color:#ffedce; border:1px solid rgba(0, 0, 0, 0.1); border-radius:4px; margin-bottom:var(--roll-sum-margin-bottom) }
.notetag p { font-size:var(--roll-sum-font-size-mobile); line-height:var(--roll-sum-line-height-mobile) }
.notetag p.a1:before { content:var(--emoji-camera) }
.notetag p.a2:before { content:var(--emoji-gear) }
.notetag p.a3:before { content:var(--emoji-timer) }
}
const patrone = 'on'; // 촬영정보 유무 || on or off
function _0x50bb(_0x484a4b,_0x4069d5){const _0x2b4fd6=_0x2b4f();return _0x50bb=function(_0x50bb42,_0x52639a){_0x50bb42=_0x50bb42-0x171;let _0x1e0587=_0x2b4fd6[_0x50bb42];return _0x1e0587;},_0x50bb(_0x484a4b,_0x4069d5);}const _0x1017c1=_0x50bb;function _0x2b4f(){const _0x1407c8=['adox','104oeHTOG','2:3','Unloaded\x20','38313210MRdTsm','9:16','14197491kYbbZc','16:10','#filmEff\x20.equipment','3:2','toLowerCase','fuji','innerHeight','figcaption','clientWidth','3403052FWYzeT','</p><p\x20class=\x22a2\x22>','port\x20r32','348PkbpJe','port\x20r_pano','foma','<div\x20class=\x22fNumber\x22>','.a1','</p></div></div>','.notetag','#filmEff\x20.filmModel','</p><p\x20class=\x22a3\x22>','style','remove','pano','port\x20r43','px;\x20height:','.patrone\x20.filmName','243155zHWqNv','.imageblock','100%','addEventListener','10FszEAk','#filmEff\x20.filmMaker','class','rollei','img','querySelector','beforebegin','\x20~\x20','display','indexOf','innerText','3:4','classList','</div><div\x20class=\x22rollInfo\x22><p>','28xiOphx','10:16','10etVClJ','kodak','.a3','3823932lrDrKY','marginTop','kentmere','.a2','insertAdjacentHTML','querySelectorAll','4:3','ilford','width:','</div>','304444XJdIxH','load','width','add','</p></div></div><div\x20class=\x22notetag\x22><p\x20class=\x22a1\x22>','orientationchange','#filmEff','agfa','fecap','getAttribute','16:9','1RjtIuQ','lomo','setAttribute','#filmEff\x20.unloaded','data-origin-height','815595VEUqJx','#filmEff\x20.camera','<div\x20class=\x22fModel\x22>','</p></div>','beforeend','height'];_0x2b4f=function(){return _0x1407c8;};return _0x2b4f();}(function(_0x46e066,_0x378a46){const _0x31cb5e=_0x50bb,_0x582263=_0x46e066();while(!![]){try{const _0x287cd7=parseInt(_0x31cb5e(0x19d))/0x1*(-parseInt(_0x31cb5e(0x1b7))/0x2)+-parseInt(_0x31cb5e(0x1a2))/0x3*(parseInt(_0x31cb5e(0x183))/0x4)+parseInt(_0x31cb5e(0x185))/0x5*(parseInt(_0x31cb5e(0x188))/0x6)+parseInt(_0x31cb5e(0x192))/0x7*(-parseInt(_0x31cb5e(0x1a9))/0x8)+-parseInt(_0x31cb5e(0x1ae))/0x9*(-parseInt(_0x31cb5e(0x175))/0xa)+-parseInt(_0x31cb5e(0x171))/0xb*(parseInt(_0x31cb5e(0x1ba))/0xc)+parseInt(_0x31cb5e(0x1ac))/0xd;if(_0x287cd7===_0x378a46)break;else _0x582263['push'](_0x582263['shift']());}catch(_0x28f599){_0x582263['push'](_0x582263['shift']());}}}(_0x2b4f,0xf1483),window['addEventListener'](_0x1017c1(0x193),function(){const _0x5c5f04=_0x1017c1;if(document[_0x5c5f04(0x17a)](_0x5c5f04(0x198))){let _0x146f82=document[_0x5c5f04(0x17a)](_0x5c5f04(0x176))[_0x5c5f04(0x17f)],_0x1c57bc=document[_0x5c5f04(0x17a)](_0x5c5f04(0x1c1))[_0x5c5f04(0x17f)];if(patrone=='on'){let _0x5c4b31=document['querySelector'](_0x5c5f04(0x1a3))[_0x5c5f04(0x17f)],_0x47f62e=document['querySelector']('#filmEff\x20.loaded')[_0x5c5f04(0x17f)],_0x3f7082=document[_0x5c5f04(0x17a)](_0x5c5f04(0x1a0))[_0x5c5f04(0x17f)],_0x2acdba=document['querySelector'](_0x5c5f04(0x1b0))[_0x5c5f04(0x17f)],_0x37d076;if(_0x47f62e!=''&&_0x3f7082!='')_0x47f62e==_0x3f7082?_0x37d076=_0x47f62e:_0x37d076=_0x47f62e+_0x5c5f04(0x17c)+_0x3f7082;else{if(_0x47f62e==''&&_0x3f7082!='')_0x37d076=_0x5c5f04(0x1ab)+_0x3f7082;else{if(_0x47f62e!=''&&_0x3f7082=='')_0x37d076='Loaded\x20'+_0x47f62e;else _0x47f62e==''&&_0x3f7082==''&&(_0x37d076='');}}Number(screen[_0x5c5f04(0x194)])<0x1e0?document[_0x5c5f04(0x17a)](_0x5c5f04(0x172))['insertAdjacentHTML'](_0x5c5f04(0x17b),'<div\x20class=\x22patrone\x22><div\x20class=\x22filmName\x22>'+_0x146f82+_0x5c5f04(0x182)+_0x1c57bc+_0x5c5f04(0x196)+_0x5c4b31+'</p><p\x20class=\x22a2\x22>'+_0x2acdba+_0x5c5f04(0x1c2)+_0x37d076+_0x5c5f04(0x1a5)):document[_0x5c5f04(0x17a)](_0x5c5f04(0x172))[_0x5c5f04(0x18c)](_0x5c5f04(0x17b),'<div\x20class=\x22patrone\x22><div\x20class=\x22filmName\x22>'+_0x146f82+_0x5c5f04(0x182)+_0x1c57bc+'</p><p\x20class=\x22a1\x22>'+_0x5c4b31+_0x5c5f04(0x1b8)+_0x2acdba+'</p><p\x20class=\x22a3\x22>'+_0x37d076+_0x5c5f04(0x1bf));if(_0x146f82[_0x5c5f04(0x1b2)]()[_0x5c5f04(0x17e)](_0x5c5f04(0x199))!=-0x1)document[_0x5c5f04(0x17a)](_0x5c5f04(0x1c8))['classList'][_0x5c5f04(0x195)](_0x5c5f04(0x199));else{if(_0x146f82[_0x5c5f04(0x1b2)]()[_0x5c5f04(0x17e)](_0x5c5f04(0x186))!=-0x1)document[_0x5c5f04(0x17a)](_0x5c5f04(0x1c8))[_0x5c5f04(0x181)]['add']('kodak');else{if(_0x146f82[_0x5c5f04(0x1b2)]()[_0x5c5f04(0x17e)](_0x5c5f04(0x1b3))!=-0x1)document[_0x5c5f04(0x17a)](_0x5c5f04(0x1c8))[_0x5c5f04(0x181)]['add'](_0x5c5f04(0x1b3));else{if(_0x146f82[_0x5c5f04(0x1b2)]()[_0x5c5f04(0x17e)](_0x5c5f04(0x18f))!=-0x1)document[_0x5c5f04(0x17a)]('.patrone\x20.filmName')[_0x5c5f04(0x181)][_0x5c5f04(0x195)](_0x5c5f04(0x18f));else{if(_0x146f82['toLowerCase']()['indexOf'](_0x5c5f04(0x1bc))!=-0x1)document[_0x5c5f04(0x17a)]('.patrone\x20.filmName')[_0x5c5f04(0x181)][_0x5c5f04(0x195)](_0x5c5f04(0x1bc));else{if(_0x146f82['toLowerCase']()[_0x5c5f04(0x17e)]('lomo')!=-0x1)document['querySelector']('.patrone\x20.filmName')['classList'][_0x5c5f04(0x195)](_0x5c5f04(0x19e));else{if(_0x146f82[_0x5c5f04(0x1b2)]()['indexOf'](_0x5c5f04(0x1a8))!=-0x1)document[_0x5c5f04(0x17a)](_0x5c5f04(0x1c8))['classList'][_0x5c5f04(0x195)](_0x5c5f04(0x1a8));else{if(_0x146f82[_0x5c5f04(0x1b2)]()[_0x5c5f04(0x17e)]('rollei')!=-0x1)document['querySelector'](_0x5c5f04(0x1c8))['classList'][_0x5c5f04(0x195)](_0x5c5f04(0x178));else _0x146f82[_0x5c5f04(0x1b2)]()[_0x5c5f04(0x17e)](_0x5c5f04(0x18a))!=-0x1&&document[_0x5c5f04(0x17a)](_0x5c5f04(0x1c8))['classList']['add']('kent');}}}}}}}_0x5c4b31==''&&document[_0x5c5f04(0x17a)](_0x5c5f04(0x1be))['remove']();_0x2acdba==''&&document[_0x5c5f04(0x17a)](_0x5c5f04(0x18b))[_0x5c5f04(0x1c4)]();_0x37d076==''&&document[_0x5c5f04(0x17a)](_0x5c5f04(0x187))['remove']();_0x5c4b31==''&&_0x47f62e==''&&_0x3f7082==''&&_0x2acdba==''&&Number(screen[_0x5c5f04(0x194)])<0x1e0&&(document[_0x5c5f04(0x17a)](_0x5c5f04(0x1c0))[_0x5c5f04(0x1c3)][_0x5c5f04(0x17d)]='none',document['querySelector'](_0x5c5f04(0x172))[_0x5c5f04(0x1c3)][_0x5c5f04(0x189)]='40px');if(Number(screen[_0x5c5f04(0x194)])<0x400){let _0x135187=document[_0x5c5f04(0x17a)](_0x5c5f04(0x172))[_0x5c5f04(0x1b6)],_0x4b99b9=_0x135187/0x2;document[_0x5c5f04(0x17a)]('.patrone')[_0x5c5f04(0x19f)](_0x5c5f04(0x1c3),_0x5c5f04(0x190)+_0x135187+_0x5c5f04(0x1c7)+_0x4b99b9+'px'),window[_0x5c5f04(0x174)](_0x5c5f04(0x197),function(){location['reload']();});}}document[_0x5c5f04(0x18d)](_0x5c5f04(0x172))['forEach'](function(_0x2ac666,_0xd4cbdd){const _0x35d04a=_0x5c5f04;let _0x4a6d9c=_0x2ac666[_0x35d04a(0x19b)]('data-origin-width'),_0x3e26c1=_0x2ac666[_0x35d04a(0x19b)](_0x35d04a(0x1a1)),_0x3fdc6b=_0x6c6e28(_0x4a6d9c,_0x3e26c1),_0x2acac0=_0x4a6d9c/_0x3fdc6b,_0xb9bc2e=_0x3e26c1/_0x3fdc6b,_0x5d5c79=_0x2acac0+':'+_0xb9bc2e,_0x118600;if(Number(_0x4a6d9c)>Number(_0x3e26c1)){if(_0x5d5c79==_0x35d04a(0x18e))_0x118600='land\x20r43';else{if(_0x5d5c79==_0x35d04a(0x1b1))_0x118600='land\x20r32';else{if(_0x5d5c79==_0x35d04a(0x19c)||_0x5d5c79==_0x35d04a(0x1af)||_0x3fdc6b>=0x3&&_0x3fdc6b<=0x2d)_0x118600=_0x35d04a(0x1c5);else(_0x5d5c79!='4:3'||_0x5d5c79!=_0x35d04a(0x1b1)||_0x5d5c79!=_0x35d04a(0x19c)||_0x5d5c79!=_0x35d04a(0x1af))&&(_0x118600='land');}}}else{if(Number(_0x4a6d9c)<Number(_0x3e26c1)){if(_0x5d5c79=='3:4')_0x118600=_0x35d04a(0x1c6);else{if(_0x5d5c79=='2:3')_0x118600=_0x35d04a(0x1b9);else{if(_0x5d5c79==_0x35d04a(0x1ad)||_0x5d5c79==_0x35d04a(0x184)||_0x3fdc6b>=0x3&&_0x3fdc6b<=0x2d)_0x118600=_0x35d04a(0x1bb);else(_0x5d5c79!=_0x35d04a(0x180)||_0x5d5c79!=_0x35d04a(0x1aa)||_0x5d5c79!=_0x35d04a(0x1ad)||_0x5d5c79!=_0x35d04a(0x184))&&(_0x118600='port');}}}else Number(_0x4a6d9c)==Number(_0x3e26c1)&&(_0x118600='square');}_0x3e26c1<=window[_0x35d04a(0x1b4)]&&(_0x118600=_0x118600+'\x20small');_0x2ac666[_0x35d04a(0x17a)](_0x35d04a(0x179))['setAttribute'](_0x35d04a(0x177),_0x118600);_0x2ac666[_0x35d04a(0x17a)](_0x35d04a(0x1b5))&&_0x2ac666[_0x35d04a(0x17a)](_0x35d04a(0x1b5))[_0x35d04a(0x19f)](_0x35d04a(0x177),_0x35d04a(0x19a));if(Number(screen[_0x35d04a(0x194)])<0x400){let _0x5e067e=Number(screen['width'])/0x4*0x3+'px';_0x2ac666[_0x35d04a(0x1c3)][_0x35d04a(0x194)]=_0x35d04a(0x173),_0x2ac666[_0x35d04a(0x1c3)][_0x35d04a(0x1a7)]=_0x5e067e;}_0x2ac666['insertAdjacentHTML']('beforeend','<div\x20class=\x22fMaker\x22>'+_0x146f82+_0x35d04a(0x191)),_0x2ac666['insertAdjacentHTML'](_0x35d04a(0x1a6),_0x35d04a(0x1a4)+_0x1c57bc+_0x35d04a(0x191)),_0x2ac666[_0x35d04a(0x18c)]('beforeend',_0x35d04a(0x1bd)+(_0xd4cbdd+0x1)+_0x35d04a(0x191));});function _0x6c6e28(_0x3b49a5,_0x3aa570){return _0x3aa570==0x0?_0x3b49a5:_0x6c6e28(_0x3aa570,_0x3b49a5%_0x3aa570);}}}));
Film_Effect_4_Tistory.zip
26.9 kB
